Bar Chart

Compare magnitude across categories — grouped, stacked, or horizontal.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { BarChart } from "@aile.sh/elia";

const MONTHS = ["Mar", "Apr", "May", "Jun", "Jul", "Aug"];

export function Example() {
  return (
    <BarChart
      title="Inference spend by model"
      caption="Stacked, in USD"
      labels={MONTHS}
      stacked
      showTable
      height={260}
      formatValue={(v) => `${v.toLocaleString()}`}
      series={[
        { id: "nano", label: "aile-nano", data: [820, 940, 1120, 1080, 1340, 1510] },
        { id: "core", label: "aile-core", data: [1400, 1620, 1580, 1910, 2240, 2610] },
        { id: "pro", label: "aile-pro", data: [600, 780, 1240, 1460, 1720, 2280] },
      ]}
    />
  );
}

— elia design system · MIT · charts · https://github.com/aile-sh/elia