Lumeo

Scatter Chart

Reveal correlations and distributions between two continuous variables. Ideal for data exploration and identifying clusters or outliers.

Installation

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<ScatterChart />
Scatter chart with 2 series (Team Alpha, Team Beta) and 14 data points.
SeriesItemValue
Team Alpha114, 82.3
Team Alpha222, 74.1
Team Alpha38, 91.5
Team Alpha431, 65.8
Team Alpha518, 78.4
Team Alpha625, 69.2
Team Alpha711, 87.6
Team Beta128, 55.3
Team Beta237, 48.7
Team Beta319, 62.1
Team Beta443, 41.5
Team Beta533, 51.8
Team Beta624, 58.9
Team Beta740, 45.2

Compare two cohorts across the same axes — experience vs. performance score — to spot separation between groups.

Scatter chart with 3 series (Enterprise, Professional, Starter) and 21 data points.
SeriesItemValue
Enterprise12.1, 94200
Enterprise21.3, 128400
Enterprise33.4, 87600
Enterprise40.8, 142800
Enterprise54.2, 76300
Enterprise61.9, 111200
Enterprise72.7, 98700
Professional15.8, 34200
Professional27.2, 28700
Professional34.1, 41800
Professional49.3, 22400
Professional56.4, 31600
Professional68.1, 26300
Professional75.2, 38900
Starter111.4, 8200
Starter214.7, 6300
Starter38.9, 11400
Starter418.2, 4800
Starter512.6, 7100
Starter616.3, 5600
Starter710.1, 9800

Plot customer lifetime value against support ticket volume across three distinct customer segments.

Scatter chart with 2 series (Team Alpha, Team Beta) and 14 data points.
SeriesItemValue
Team Alpha114, 82.3
Team Alpha222, 74.1
Team Alpha38, 91.5
Team Alpha431, 65.8
Team Alpha518, 78.4
Team Alpha625, 69.2
Team Alpha711, 87.6
Team Beta128, 55.3
Team Beta237, 48.7
Team Beta319, 62.1
Team Beta443, 41.5
Team Beta533, 51.8
Team Beta624, 58.9
Team Beta740, 45.2

Set a uniform BubbleSize to make individual data points stand out, useful when the x/y position carries all the information.

Scatter chart with 10 data points.
NameValue
11200, 3.4
22400, 4.1
33600, 4.8
44800, 5.2
56000, 5.9
67200, 6.1
78400, 6.4
89600, 6.8
910800, 7.1
1012000, 7.3

A single-series view with the legend hidden keeps the chart minimal when context is provided by surrounding copy.

Scatter chart with 3 series (Enterprise, Professional, Starter) and 21 data points.
SeriesItemValue
Enterprise12.1, 94200
Enterprise21.3, 128400
Enterprise33.4, 87600
Enterprise40.8, 142800
Enterprise54.2, 76300
Enterprise61.9, 111200
Enterprise72.7, 98700
Professional15.8, 34200
Professional27.2, 28700
Professional34.1, 41800
Professional49.3, 22400
Professional56.4, 31600
Professional68.1, 26300
Professional75.2, 38900
Starter111.4, 8200
Starter214.7, 6300
Starter38.9, 11400
Starter418.2, 4800
Starter512.6, 7100
Starter616.3, 5600
Starter710.1, 9800

Override the default color palette to match brand or encode semantic meaning (e.g. green = on-track, red = at-risk).

Scatter chart with 2 series (Team Alpha, Team Beta) and 14 data points.
SeriesItemValue
Team Alpha114, 82.3
Team Alpha222, 74.1
Team Alpha38, 91.5
Team Alpha431, 65.8
Team Alpha518, 78.4
Team Alpha625, 69.2
Team Alpha711, 87.6
Team Beta128, 55.3
Team Beta237, 48.7
Team Beta319, 62.1
Team Beta443, 41.5
Team Beta533, 51.8
Team Beta624, 58.9
Team Beta740, 45.2

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

API Reference

ScatterChart

Property Type Default Description
Series List<ScatterSeriesData> [] Data series with Name and Points (double[] coordinate pairs).
BubbleSize int? null Fixed symbol size in pixels.
ShowLegend bool true Shows legend when multiple series present.
Colors List<string>? null Custom color palette for series.
ShowTooltip bool true Enables the hover tooltip.
IsLoading bool false When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.
ShowLoadingSkeleton bool true Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).
SkeletonKind ChartSkeletonKind (chart default) Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).
SkeletonStyle ChartSkeletonStyle Phantom Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.
ShowLoadingLabel bool true Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18)
LoadingText string? "Loading…" Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18)
Width string "100%" CSS width of the chart container.
Height string "350px" CSS height of the chart container.
Theme string? null Optional ECharts theme name override.
PhantomCycleMs int 1400 Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading.
ShowDataLabels bool false When true, displays value labels on each scatter point.
LabelPosition string "top" Position of data labels relative to each point.
LabelFormat string? null Optional ECharts label formatter string for data labels.
DataZoom bool false Enables the interactive data-zoom slider beneath the chart.
Toolbox bool false Shows the ECharts toolbox with export and zoom controls.
ColorPalette List<string>? null Alternate full color palette applied to the chart.
AnimationDuration int? null Animation duration in milliseconds when data changes.
AnimationEasing string? null ECharts easing function name for animation curves.
MarkLine EChartMarkLine? null Optional mark lines overlaid on the chart (e.g. averages, thresholds).
MarkPoint EChartMarkPoint? null Optional mark points highlighting min/max or custom values.
MarkArea EChartMarkArea? null Optional shaded mark areas highlighting value bands.

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.