Chart

Series colours come from the series tokens, so a chart follows the theme and the accent. Every chart can switch to a data table, which is how it stays accessible.

import { Chart } from '@andrewbehma/glass-ui';

Playground

Chart.tsx

import { Chart } from '@andrewbehma/glass-ui';

<div className="w-full max-w-2xl">
  <Chart
    label="Active users by platform"
    x="category"
    height={240}
    legend={"top"}
    series={[
    {
      id: 'web',
      name: 'Web',
      kind: 'area',
      points: [{ x: 'Jan', y: 42 }, { x: 'Feb', y: 51 }, { x: 'Mar', y: 48 }, { x: 'Apr', y: 63 }, { x: 'May', y: 70 }, { x: 'Jun', y: 66 }, { x: 'Jul', y: 81 }],
    },
    {
      id: 'mobile',
      name: 'Mobile',
      kind: 'area',
      points: [{ x: 'Jan', y: 18 }, { x: 'Feb', y: 22 }, { x: 'Mar', y: 30 }, { x: 'Apr', y: 27 }, { x: 'May', y: 35 }, { x: 'Jun', y: 41 }, { x: 'Jul', y: 39 }],
    },
    ]}
  />
</div>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Area
Line
Stacked bars