---
layout: ~/layouts/MdxDocLayout.astro
title: "Charts"
description: "Charts built on ECharts."
sourceFile: "components/chart"
---

import ComponentSection from "~/components/docs/ComponentSection.astro";
import {
  PieChartPreviewDemo,
  TimeseriesChartPreviewDemo,
  LegendDefaultDemo,
  LegendCompactDemo,
  ChartExampleDemo,
} from "~/components/demos/Chart/ChartDemo";
import { ColorDemo } from "~/components/demos/Chart/ColorDemo";
import ChartCard from "~/components/demos/Chart/ChartCard.astro";
import Heading from "~/components/docs/Heading.astro";
import ComponentExample from "~/components/docs/ComponentExample.astro";

<ComponentSection>
  <p class="mb-4">
    Chart components are built on ECharts. Install it as a dependency:
  </p>

```bash
npm install echarts
```

<p class="my-4">
  For optimal bundle size, import only the ECharts components you need. The
  examples below show the minimum required imports for our use cases.
</p>

```tsx
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,
]);
```

</ComponentSection>

<ComponentSection>
  <Heading level={2}>Available Charts</Heading>

  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <ChartCard
      title="Timeseries Chart"
      description="A specialized chart for displaying time-based data."
      href="/charts/timeseries"
    >
      <TimeseriesChartPreviewDemo client:visible />
    </ChartCard>

    <ChartCard
      title="Custom Chart"
      description="Examples like pie charts."
      href="/charts/custom"
    >
      <PieChartPreviewDemo client:visible />
    </ChartCard>

  </div>
</ComponentSection>

<ComponentSection>
  <Heading level={2}>Coloring</Heading>

  <div class="space-y-6">
    <p>
      Use semantic colors for meaning (errors, warnings) and categorical
      colors for differentiating arbitrary series.
    </p>

```tsx
import { ChartPalette } from "@cloudflare/kumo";

const attention = ChartPalette.semantic("Attention", isDarkMode);
const series0 = ChartPalette.color(0, isDarkMode);
```

    <ColorDemo />

  </div>
</ComponentSection>

<ComponentSection>
  <Heading level={2}>Legend</Heading>

<p class="mb-6">
  Use <code>LegendItem</code> to display chart series information with color
  indicators.
</p>

<Heading level={3}>LargeItem</Heading>
<ComponentExample demo="LegendDefaultDemo">
  <LegendDefaultDemo client:visible />
</ComponentExample>

  <Heading level={3}>SmallItem</Heading>
  <ComponentExample demo="LegendCompactDemo">
    <LegendCompactDemo client:visible />
  </ComponentExample>
</ComponentSection>

<ChartExampleDemo client:visible />
