BarChart

import { BarChart, ChartLegend, ChartPanel } from '@arbol-ai/ui/charts';
import type { BarSeries } from '@arbol-ai/ui/charts';

const DAYS = ['Nov 2', 'Nov 3', 'Nov 4', 'Nov 5', 'Nov 6', 'Nov 7'];

const BY_STATUS: BarSeries[] = [
  { label: 'Attended', values: [38, 42, 35, 44, 40, 18], color: 'chart-positive' },
  { label: 'Cancelled', values: [4, 6, 3, 5, 7, 2], color: 'chart-caution' },
  { label: 'No-show', values: [3, 2, 5, 1, 4, 1], color: 'chart-negative' },
];

<ChartPanel
  legend={<ChartLegend items={BY_STATUS.map(({ label, color = 'chart-1' }) => ({ label, color }))} />}
  note="Attended, cancelled and no-show appointments per day"
  title="Appointments by status"
>
  <BarChart
    aria-label="Appointments per day by status"
    categories={DAYS}
    isStacked
    series={BY_STATUS}
  />
</ChartPanel>

import { BarChart } from '@arbol-ai/ui/charts';

<BarChart
  aria-label="Conversations by channel, this period and the previous one"
  categories={['WhatsApp', 'Phone', 'Web chat']}
  series={[
    { label: 'Previous period', values: [1180, 640, 212], color: 'chart-neutral' },
    { label: 'This period', values: [1342, 598, 287], color: 'chart-1' },
  ]}
/>

import { BarChart } from '@arbol-ai/ui/charts';

const PERCENT: Intl.NumberFormatOptions = { style: 'percent' };

<BarChart
  aria-label="Attendance rate by professional"
  categories={['Dr. Ana Gómez', 'Dr. Luis Pérez', 'Dr. Sara Ruiz', 'Dr. Tomás Vidal']}
  formatOptions={PERCENT}
  height={200}
  orientation="horizontal"
  series={[{ label: 'Attendance', values: [0.94, 0.88, 0.81, 0.76] }]}
/>