Charts
@cloudflare/kumo

Charts

Charts built on ECharts.

Chart components are built on ECharts. Install it as a dependency:

npm install echarts

For 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

Timeseries Chart
A specialized chart for displaying time-based data.
Learn more
Custom Chart
Examples like pie charts.
Learn more

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 ColorLightDark
Attention
#FC574A
#FC574AE6
Warning
#F8A054
#F8A054E6
Neutral
#82B6FF
#82B6FFE6
NeutralLight
#B9D6FF
#B9D6FFE6
Disabled
#B6B6B6
#B6B6B6E6
DisabledLight
#D9D9D9
#D9D9D9E6
Categorical Colors
IndexLightDark
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
 
import { ChartPalette, ChartLegend } from "@cloudflare/kumo";

/**
 * Legend items with default variant showing semantic colors.
 */
export function LegendDefaultDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Active State</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
        <ChartLegend.LargeItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
        />
        <ChartLegend.LargeItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.LargeItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="text-sm font-medium mt-12">Inactive State</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
        <ChartLegend.LargeItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
          inactive
        />
        <ChartLegend.LargeItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.LargeItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>
    </div>
  );
}

SmallItem

Active State

Requests1,234
Storage56
Warnings128

Inactive State

Requests1,234
Storage56
Warnings128
 
import { ChartPalette, ChartLegend } from "@cloudflare/kumo";

/**
 * Legend items with compact variant using categorical colors.
 */
export function LegendCompactDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Active State</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
        />
        <ChartLegend.SmallItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.SmallItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="text-sm font-medium mt-12">Inactive State</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
          inactive
        />
        <ChartLegend.SmallItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.SmallItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>
    </div>
  );
}
Read latency
P99
124ms
P95
76ms
P75
32ms
P50
10ms