BarChart

A vertical bar chart for comparing values across categories, with optional stacking.

Installation

npx @obi/ui add bar-chart

Requires: recharts

Preview

Usage

import { BarChart } from '@/src/components/Charts/Charts';

const data = [
  { quarter: 'Q1', sales: 4000, returns: 400 },
  { quarter: 'Q2', sales: 3000, returns: 300 },
  { quarter: 'Q3', sales: 5000, returns: 200 },
  { quarter: 'Q4', sales: 4780, returns: 180 },
];

export default function Example() {
  return (
    <BarChart
      data={data}
      xKey="quarter"
      series={[
        { key: 'sales', label: 'Sales' },
        { key: 'returns', label: 'Returns' },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
data	ChartDataPoint[]	—	Array of data objects.
xKey	string	—	Key to use as the x-axis label.
series	ChartSeries[]	—	Bar groups to render.
stacked	boolean	false	Stack series on top of each other.
height	number	240	Chart height in px.
showLegend	boolean	true	Whether to show the legend.
showGrid	boolean	true	Whether to show the background grid.
className	string	""	Extra classes applied to the container.