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 a shared setup module used by the docs.

import { BarChart, LineChart, MapChart, PieChart, ScatterChart } from "echarts/charts";
import { GeoComponent, GridComponent, TooltipComponent } from "echarts/components";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  LineChart,
  MapChart,
  PieChart,
  ScatterChart,
  GeoComponent,
  GridComponent,
  TooltipComponent,
  CanvasRenderer,
]);

Available Charts

Timeseries Chart

A specialized chart for displaying time-based data.

Maps

Map chart components for GeoJSON data.

Custom Chart

Examples like pie charts.

Color System

See Chart Colors for semantic, categorical, and sequential color tokens.

Legend

Use legend items to display chart series information with color indicators.

LargeItem

Requests

12.4M

Cached

9.8M hits

<script lang="ts">
  import { ChartLegendLargeItem, ChartPalette } from "kumo-svelte/components/chart";
</script>

<div class="flex flex-wrap gap-6">
  <ChartLegendLargeItem name="Requests" value="12.4M" color={ChartPalette.categorical(0)} />
  <ChartLegendLargeItem name="Cached" value="9.8M" unit="hits" color={ChartPalette.categorical(4)} />
</div>

SmallItem

Success 99.98%

Errors 0.02%

<script lang="ts">
  import { ChartLegendSmallItem, ChartPalette } from "kumo-svelte/components/chart";
</script>

<div class="flex flex-wrap gap-4">
  <ChartLegendSmallItem name="Success" value="99.98%" color={ChartPalette.semantic("Success")} />
  <ChartLegendSmallItem name="Errors" value="0.02%" color={ChartPalette.semantic("Attention")} />
</div>