---
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 ChartCard from "~/components/demos/Chart/ChartCard.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>

## Available Charts

  <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>

## Color System

  <ChartCard
    title="Color Palette"
    description="Information about our color system."
    href="/charts/colors"
  />
</ComponentSection>

<ComponentSection>

## Legend

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

### LargeItem

<ComponentExample demo="LegendDefaultDemo">
  <LegendDefaultDemo client:visible />
</ComponentExample>

### SmallItem

  <ComponentExample demo="LegendCompactDemo">
    <LegendCompactDemo client:visible />
  </ComponentExample>
</ComponentSection>

<ChartExampleDemo client:visible />
