React components
Bar chart
A simple bar chart component for visualizing categorical data.
Overview
The BarChart component renders a series of vertical bars to represent data values. It is responsive and adjusts its layout based on the number of data points. It also supports highlighting specific bars.
Usage
import { BarChart } from '@/components/core/bar-chart';
const data = [
{ month: 'Jan', value: 40 },
{ month: 'Feb', value: 70, highlight: true },
{ month: 'Mar', value: 50 },
];
function Stats() {
return (
<BarChart
data={data}
barHeight="150px"
className="w-full max-w-sm"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data? | BarChartData[] | Required | Array of data objects containing value and label information. |
barHeight? | string | '112px' | The maximum height of the bars in CSS units. |
className? | string | - | Optional CSS class names for styling the container. |
Data Interface
interface BarChartData {
value: number; // The height percentage (0-100)
month: string; // Label shown below the bar
highlight?: boolean; // Whether to highlight this bar
}