Chart

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

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>