Timeseries Chart

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.

import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
{
name: "Requests",
color: ChartPalette.semantic("Neutral", isDarkMode),
data: [
[timestamp_in_ms, value],
[timestamp_in_ms, value],
...
],
},
{
name: "Errors",
color: ChartPalette.semantic("Attention", isDarkMode),
data: [
[timestamp_in_ms, value],
[timestamp_in_ms, value],
...
],
},
];

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
xAxisName="Time (UTC)"
yAxisName="Count"
/>

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.

import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
xAxisName="Time (UTC)"
yAxisTickLabelFormat={(value) => {
  return Math.round(value).toString() + " requests";
}}
/>

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.

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
xAxisName="Time (UTC)"
yAxisName="Count"
gradient
/>

Incomplete Data

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

import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
{
name: "Bandwidth",
color: ChartPalette.color(0, isDarkMode),
data: [
[timestamp_in_ms, value],
[timestamp_in_ms, value],
...
],
},
];

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
xAxisName="Time (UTC)"
yAxisName="Mbps"
incomplete={{ after: timestamp_in_ms }}
/>

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.

import { TimeseriesChart, ChartPalette } from "@cloudflare/kumo";

const data = [
{
name: "CPU Usage",
color: ChartPalette.color(0, isDarkMode),
data: [
[timestamp_in_ms, value],
[timestamp_in_ms, value],
...
],
},
];

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
xAxisName="Time (UTC)"
yAxisName="%"
onTimeRangeChange={(from, to) => {
  alert("Selected range: " + from + " - " + to);
}}
/>

Bar Chart

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

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
type="bar"
data={data}
xAxisName="Time (UTC)"
yAxisName="Count"
/>

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.

const [isLoading, setIsLoading] = useState(true);

<TimeseriesChart
echarts={echarts}
isDarkMode={isDarkMode}
data={data}
loading={isLoading}
/>

Kumo