Phi / Timeseries Chart

Each data point is a tuple of [timestamp_in_ms, value].

Axis names, tick labels, and horizontal gridlines automatically use muted, mode-aware chart colors.

Basic Line Chart

A simple line chart displaying multiple data series over time.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Reference Markers

Use markers to render vertical reference lines at specific timestamps. Marker details close when the pointer leaves the chart, including after a browser context-menu interaction.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :markers="markers"
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Thresholds

Use thresholds to render horizontal reference lines on the value axis, such as limits or quota boundaries.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :thresholds="thresholds"
  x-axis-name="Time (UTC)"
  y-axis-name="Memory (MB)"
/>

Custom Timestamp and Value Formats

Use xAxisTickFormat for axis labels and tooltipTimestampFormat for tooltip timestamps. Both receive the raw timestamp in milliseconds, so one time zone applies across the chart. Without a formatter, tooltips use the browser locale and time zone.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :x-axis-tick-format="formatTime"
  :y-axis-tick-format="formatCompact"
  :tooltip-value-format="formatRequests"
  :tooltip-timestamp-format="formatTooltipTimestamp"
  x-axis-name="Time (UTC)"
  y-axis-name="Requests"
/>

Discrete Y-Axis Ticks

Set yAxisMinInterval to 1 for count data so the value axis stops drawing fractional tick marks.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :y-axis-min-interval="1"
  x-axis-name="Time (UTC)"
  y-axis-name="Active jobs"
/>

Gradient Fill

Set gradient to render a vertical fill beneath each line series.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  gradient
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Incomplete Data

Use incomplete before or after timestamps to draw dashed edge ranges.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :incomplete="{ after: incompleteTimestamp }"
  x-axis-name="Time (UTC)"
  y-axis-name="Mbps"
/>

Time Range Selection

Provide onTimeRangeChange to let users drag across the chart and select a time range.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :on-time-range-change="handleTimeRangeChange"
  x-axis-name="Time (UTC)"
  y-axis-name="%"
/>

Tooltip Cursor Tracking

Use tooltipFollowCursor to choose free cursor tracking or an x-axis locked tooltip.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :tooltip-follow-cursor="followCursor"
  x-axis-name="Time (UTC)"
  y-axis-name="Latency (ms)"
/>

Tooltip Boundary

Pass a boundary element to keep the tooltip inside a constrained chart panel.

<div ref="boundaryElement">
  <TimeseriesChart
    :echarts="echarts"
    :data="data"
    :tooltip-boundary="boundaryElement ?? undefined"
  />
</div>

Tooltip Footer

tooltipFooter adds brief supporting text below the values in standard series tooltips and marker tooltips. An empty string adds no space.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :markers="markers"
  tooltip-footer='Percentiles use a "five-minute" rolling window.'
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Empty Tooltip Footer

An empty tooltipFooter adds no space, so both tooltip kinds keep their default layout.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  :markers="markers"
  tooltip-footer=""
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Bar Chart

Set type to bar to render stacked time-series bars.

<TimeseriesChart
  :echarts="echarts"
  :data="data"
  type="bar"
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Legend Highlight

Hovering a legend item highlights the matching series and fades the remaining legend items.

<ChartLegend.LargeItem
  name="P99"
  :color="color"
  value="124"
  unit="ms"
  @pointerenter="chart?.dispatchAction({ type: 'highlight', seriesName: 'P99' })"
  @pointerleave="chart?.dispatchAction({ type: 'downplay', seriesName: 'P99' })"
/>

Legend Click

Clicking a legend item isolates that series. Clicking the isolated series restores all series.

<ChartLegend.LargeItem
  name="P99"
  :color="color"
  value="124"
  unit="ms"
  @click="toggleSeries('P99')"
/>

<TimeseriesChart
  ref="chart"
  :echarts="echarts"
  :data="data"
  enable-legend-selection
/>

Loading State · Line

Set loading to show a calm area-shaped skeleton while line data resolves.

<TimeseriesChart
  :echarts="echarts"
  :data="[]"
  loading
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

Loading State · Bar

The skeleton follows type="bar" with the same harmonic silhouette and subtle shimmer.

<TimeseriesChart
  :echarts="echarts"
  :data="[]"
  loading
  type="bar"
  x-axis-name="Time (UTC)"
  y-axis-name="Count"
/>

API Reference

Prop	Type	Default	Description
`echarts`	`typeof echarts`	`-`	ECharts core instance with the required modules registered.
`data`	`TimeseriesData[]`	`-`	Series as [timestamp_ms, value] tuples.
`type`	`"line" \| "bar"`	`"line"`	Renders line series or stacked bar series.
`markers`	`TimeseriesMarker[]`	`-`	Vertical reference markers rendered at specific timestamps.
`thresholds`	`TimeseriesThreshold[]`	`-`	Horizontal threshold lines rendered on the value axis.
`xAxisName`	`string`	`-`	Label for the time axis.
`xAxisTickCount`	`number`	`5`	Approximate number of x-axis ticks.
`xAxisTickFormat`	`(value: number) => string`	`-`	Formats x-axis timestamp labels.
`yAxisName`	`string`	`-`	Label for the value axis.
`yAxisTickCount`	`number`	`-`	Approximate number of y-axis ticks.
`yAxisMinInterval`	`number`	`-`	Minimum interval between y-axis ticks. Use 1 for discrete count data.
`yAxisTickFormat`	`(value: number) => string`	`-`	Formats y-axis value labels.
`yAxisTickLabelFormat`	`(value: number) => string`	`-`	Deprecated alias for tooltip value formatting.
`tooltipValueFormat`	`(value: number) => string`	`-`	Formats values in the tooltip.
`tooltipTimestampFormat`	`(timestamp: number) => string`	`-`	Formats tooltip timestamps in standard and marker tooltips. Receives the raw timestamp in milliseconds. Defaults to the browser locale and time zone.
`tooltipFooter`	`string`	`-`	Footer text rendered below the values in standard and marker tooltips. An empty string adds no space.
`tooltipFollowCursor`	`"both" \| "x"`	`"both"`	Controls whether the tooltip follows both axes or locks vertically.
`tooltipBoundary`	`"clipping-ancestors" \| Element \| Element[]`	`"clipping-ancestors"`	Constrains tooltip placement.
`tooltipMode`	`"all" \| "single"`	`"all"`	Controls how many series are shown in the tooltip.
`tooltipMaxItems`	`number`	`10`	Maximum tooltip rows when tooltipMode is all.
`gradient`	`boolean`	`false`	Adds a fading area fill beneath line series.
`incomplete`	`{ before?: number; after?: number }`	`-`	Renders incomplete edge ranges as dashed lines.
`enableLegendSelection`	`boolean`	`false`	Adds a hidden legend so custom legend items can drive series visibility.
`loading`	`boolean`	`false`	Shows a mode-aware skeleton matching the line or bar chart type.
`onTimeRangeChange`	`(from: number, to: number) => void`	`-`	Called when the user drags to select a time range.
`height`	`number`	`350`	Chart height in pixels.
`isDarkMode`	`boolean`	`false`	Initializes ECharts with dark mode and dark chart colors.
`ariaDescription`	`string`	`-`	Accessible chart description passed to ECharts aria labels.
`optionUpdateBehavior`	`SetOptionOpts`	`-`	Additional options passed to chart.setOption. Time-range brushing remains active after notMerge replacements.