# Effect Scatter Chart

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

# Effect Scatter Chart

A scatter chart with animated ripple effects on data points. Use it to draw attention to key data points, such as high-traffic locations or anomalies.

## 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

<EffectScatterChart />

Preview Code

High Traffic Points

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

### EffectScatterChart

Property

Type

Default

Description

Series

List<EffectScatterSeriesData>

\[\]

Data series with Name, Points, and optional SymbolSize.

ShowLegend

bool

true

Shows legend when multiple series present.

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)**

ShowTooltip

bool

true

Enables the hover tooltip on data points.

Colors

List<string>?

null

Custom color palette for scatter series.

Width

string

"100%"

CSS width of the chart container.

Height

string

"350px"

CSS height of the chart container.

Theme

string?

null

ECharts theme name override; null follows global Lumeo theme.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds; lower cycles placeholder data faster.

ShowDataLabels

bool

false

Renders value labels next to each scatter point.

LabelPosition

string

"top"

Position of data labels relative to each point.

LabelFormat

string?

null

ECharts formatter string applied to data labels.

DataZoom

bool

false

Enables zoom slider for dense scatter plots.

Toolbox

bool

false

Shows save/restore/zoom toolbox in the corner.

ColorPalette

List<string>?

null

Alternate color palette applied when Colors is unset.

AnimationDuration

int?

null

Override ECharts animation duration in milliseconds.

AnimationEasing

string?

null

ECharts easing function name for entry animation.

MarkLine

EChartMarkLine?

null

Reference lines (avg, max, custom) overlaid on the chart.

MarkPoint

EChartMarkPoint?

null

Marker points highlighting extrema or annotations.

MarkArea

EChartMarkArea?

null

Shaded regions highlighting value ranges on the chart.