Charts
@photon-ai/kumo-solid

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 {
  AriaComponent,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  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

Color System

Color Palette
Information about our color system.
Learn more

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

Loading state

import { ChartPalette, ChartLegend } from "@photon-ai/kumo-solid";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

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

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

      <div class="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <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 class="mt-12 text-sm font-medium">Inactive State</h3>

      <div class="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <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>

      <h3 class="mt-12 text-sm font-medium">Loading state</h3>

      <div class="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <ChartLegend.LargeItem loading />
      </div>
    </div>
  );
}

SmallItem

Active State

Requests1,234
Storage56
Warnings128

Inactive State

Requests1,234
Storage56
Warnings128

Loading state

import { ChartPalette, ChartLegend } from "@photon-ai/kumo-solid";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

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

  return (
    <div class="space-y-4">
      <h3 class="text-sm font-medium">Active State</h3>
      <div class="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 class="mt-12 text-sm font-medium">Inactive State</h3>
      <div class="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>

      <h3 class="mt-12 text-sm font-medium">Loading state</h3>

      <div class="flex flex-wrap gap-4">
        <ChartLegend.SmallItem loading />
      </div>
    </div>
  );
}
Read latency
P99
124ms
P95
76ms
P75
32ms
P50
10ms