---
title: "Chart"
description: "The ECharts host behind every recipe, for a figure no recipe draws: an accessible image whose option takes its colors from useChartTokens and its look from the shared pieces. ECharts loads with the first chart."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

## A custom option in the house style

```tsx
import { useMemo } from 'react';
import { Chart, chartGrid, chartTextStyle, chartTooltip, quietCategoryAxis, quietValueAxis, tooltipRow, useChartTokens } from '@arbol-ai/ui/charts';
import type { ChartOption } from '@arbol-ai/ui/charts';

const HOURS = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'];

const CALLS = [18, 42, 57, 51, 33, 24, 39, 46, 40, 21];

const CallsByHour = () => {
  const tokens = useChartTokens();
  const option = useMemo<ChartOption>(
    () => ({
      grid: chartGrid,
      textStyle: chartTextStyle,
      tooltip: chartTooltip(tokens, {
        trigger: 'axis',
        formatter: (params) => {
          const index = [params].flat()[0]?.dataIndex ?? 0;
          return tooltipRow('var(--chart-2)', HOURS[index] ?? '', String(CALLS[index] ?? 0));
        },
      }),
      xAxis: quietCategoryAxis(tokens, HOURS),
      yAxis: quietValueAxis(tokens, String, { isInteger: true }),
      series: [{ type: 'bar', data: CALLS, barMaxWidth: 28, itemStyle: { color: tokens['chart-2'] } }],
    }),
    [tokens]
  );
  return (
    <Chart
      aria-label="Calls answered per hour today"
      description="Calls peak at 10:00 with 57 and again at 15:00 with 46."
      option={option}
    />
  );
};

<CallsByHour />
```

## Loading and empty

A placeholder holds the space while data loads; a chart with nothing to draw says so.

```tsx
import { Chart } from '@arbol-ai/ui/charts';

<div className="grid gap-4 md:grid-cols-2">
  <Chart aria-label="Calls per hour" height={160} isLoading option={{}} />
  <Chart aria-label="Calls per hour" height={160} isEmpty option={{}} />
</div>
```

## Source

The examples above are [`src/charts/chart.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/chart.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/chart/index.mdx