Chart components are built on ECharts. Install it as a dependency:
npm install echartsFor optimal bundle size, import only the ECharts components you need. The examples below show the minimum required imports for our use cases.
import * as echarts from "echarts/core";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { useEffect, useMemo, useState } from "react";
import {
AriaComponent,
AxisPointerComponent,
BrushComponent,
GridComponent,
TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
BarChart,
LineChart,
PieChart,
AxisPointerComponent,
BrushComponent,
GridComponent,
TooltipComponent,
CanvasRenderer,
AriaComponent,
]);Available Charts
Coloring
Use semantic colors for meaning (errors, warnings) and categorical colors for differentiating arbitrary series.
import { ChartPalette } from "@cloudflare/kumo";
const attention = ChartPalette.semantic("Attention", isDarkMode);
const series0 = ChartPalette.color(0, isDarkMode);Semantic Colors
| Semantic Color | Light | Dark |
|---|---|---|
| Attention | #FC574A | #FC574AE6 |
| Warning | #F8A054 | #F8A054E6 |
| Neutral | #82B6FF | #82B6FFE6 |
| NeutralLight | #B9D6FF | #B9D6FFE6 |
| Disabled | #B6B6B6 | #B6B6B6E6 |
| DisabledLight | #D9D9D9 | #D9D9D9E6 |
Categorical Colors
| Index | Light | Dark |
|---|---|---|
| 0 | #086FFF | #086FFFE6 |
| 1 | #CF7EE9 | #CF7EE9E6 |
| 2 | #73CEE6 | #73CEE6E6 |
| 3 | #5B5FEF | #5B5FEFE6 |
| 4 | #82B6FF | #82B6FFE6 |
| 5 | #F5609F | #F5609FE6 |
| 6 | #C2BDF3 | #C2BDF3E6 |
| 7 | #8D1EB1 | #8D1EB1E6 |
| 8 | #EBCAF6 | #EBCAF6E6 |
| 9 | #7366E4 | #7366E4E6 |
Legend
Use LegendItem to display chart series information with color
indicators.
LargeItem
Active State
Requests
1,234req/s
Storage
56GB
Warnings
128
Inactive State
Requests
1,234req/s
Storage
56GB
Warnings
128
<ChartLegend.LargeItem
name="Requests"
color={ChartPalette.semantic("Neutral", isDarkMode)}
value="1,234"
unit="req/s"
/>SmallItem
Active State
Requests1,234
Storage56
Warnings128
Inactive State
Requests1,234
Storage56
Warnings128
<ChartLegend.SmallItem
name="Series A"
color={ChartPalette.color(0, isDarkMode)}
value="45%"
/>Read latency
P99
124ms
P95
76ms
P75
32ms
P50
10ms