The timeseries chart is a specialized chart for displaying time-based data. Each data point is a tuple of [timestamp_in_ms, value].

Basic Line Chart

A simple line chart displaying multiple data series over time.

Reference Markers

Pass markers to render vertical reference lines for deployments, configuration changes, or other events on the time axis.

Custom X-Axis Label Format

Use the xAxisTickLabelFormat prop to control how x-axis tick labels are rendered. The formatter receives the raw timestamp in milliseconds and returns a display string, overriding ECharts' built-in time formatting.

Gradient Fill

Set gradient to true to render a vertical gradient fill beneath each line series. The fill fades from the series color at the top to transparent at the bottom, giving the chart a polished area-chart look without losing the clarity of individual lines.

Incomplete Data

Use the incomplete prop to indicate regions where data may be incomplete or still being collected.

Time Range Selection

Enable time range selection by providing the onTimeRangeChange callback. Users can click and drag on the chart to select a time range.

Legend Highlight

Hovering a legend item highlights the corresponding series on the chart and fades the others. Use onpointerenter and onpointerleave on ChartLegend items together with dispatchAction on the chart ref.

Legend Click

Clicking a ChartLegend item isolates that series, showing only it and hiding the rest. Clicking the already-isolated series restores them all.

Tooltip Cursor Tracking

Use tooltipFollowCursor to choose whether the tooltip follows both cursor axes or only tracks the x position. Set tooltipMode="single" when dense charts should show only the series nearest to the pointer.

Tooltip Boundary

Set tooltipBoundary to keep the native tooltip within the chart container instead of letting it overflow the visual frame.

Bar Chart

Set type="bar" to render series as stacked bars instead of lines. All other props — axes, tooltips, colors — work identically.

Loading State

Set loading to true to display an animated sine-wave skeleton while data is being fetched. The chart canvas is hidden until loading completes; swap back to loading=false to reveal the chart.