# Scatter Chart

Source: https://lumeo.nativ.sh/components/charts/scatter

# Scatter Chart

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<ScatterChart />

Preview Code

Multi-Series Scatter

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

Preview Code

Customer Segments

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

Preview Code

Fixed Bubble Size

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

Preview Code

Single Series — No Legend

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

Preview Code

Custom Colors

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

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

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.