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 />
Compare two cohorts across the same axes — experience vs. performance score — to spot separation between groups.
Plot customer lifetime value against support ticket volume across three distinct customer segments.
Set a uniform BubbleSize to make individual data points stand out, useful when the x/y position carries all the information.
A single-series view with the legend hidden keeps the chart minimal when context is provided by surrounding copy.
Override the default color palette to match brand or encode semantic meaning (e.g. green = on-track, red = at-risk).
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. |