BarChart

Usage

import { InteractiveBarChart } from "@vesture/react";

const data = [
  { category: "Jan", revenue: 120, cost: 90 },
  { category: "Feb", revenue: 180, cost: 110 },
  { category: "Mar", revenue: 150, cost: 130 },
];

<div style={{ height: 320 }}>
  <InteractiveBarChart
    data={data}
    series={[
      { key: "revenue", label: "Revenue" },
      { key: "cost", label: "Cost" },
    ]}
    layout="stacked"
  />
</div>

Behavior

• layout="grouped" (default) renders series as side-by-side bars per category; layout="stacked" stacks them cumulatively into one bar per category.
• BarChart is static and server-safe, same contract as LineChart: explicit width/height, no event handlers, no client JS.
• InteractiveBarChart auto-sizes to its parent and adds hover on individual bars (not a continuous overlay like LineChart) — each bar gets its own onMouseEnter/Leave, since bars are discrete rather than a continuous line.
• The legend toggle and series color-cycling/stability rules are identical to LineChart's.