Bar Chart

The BarChart component is a flexible, customizable bar chart built with recharts. It supports horizontal or vertical layout, stacked bars, custom labels, tooltips, legends, and border radius for bars.

import { BarChart } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
data	T[]	-	Array of data objects.
series	ChartConfig	-	Defines each bar series with color, name, etc.
categoryKey	keyof T & string	-	Key used for the category axis (x-axis for vertical, y-axis for horizontal).
horizontal	boolean	false	If true, chart is rendered vertically.
showCartesianGrid	boolean	false	Show the grid lines.
tickMargin	number	10	Margin between ticks and axis.
showXAxis	boolean	true	Display the X-axis.
showYAxis	boolean	true	Display the Y-axis.
hideTooltipLabel	boolean	false	Hide the label in tooltips.
showCursor	boolean	false	Show a cursor line when hovering.
stacked	boolean	false	Stack multiple series bars.
labelList	LabelListItem[]	[]	List of labels to display on bars with position, fontSize, offset, and custom class.
withLegend	boolean	false	Show chart legend.
borderRadius	number | [number, number, number, number]	8	Border radius of bars. Can be a single number or array for each corner.
margin	Partial<Margin>	{ top: 20, right: 30, left: 20, bottom: 5 }	Chart margin.
className	string	-	Custom class for the chart container.
wrapperClassName	string	-	Custom class for the outer wrapper.

Usage

Basic Example

const data = [
  { category: "Jan", mobile: 40, desktop: 30 },
  { category: "Feb", mobile: 35, desktop: 45 },
];

const series = {
  mobile: { color: "var(--color-primary)", name: "Mobile" },
  desktop: { color: "var(--color-success)", name: "Desktop" },
};

<BarChart data={data} series={series} categoryKey="category" />;

Horizontal Bars

<BarChart
  data={data}
  series={series}
  categoryKey="category"
  horizontal
/>;

Stacked Bars with Labels

<BarChart
  data={data}
  series={series}
  categoryKey="category"
  stacked
  labelList={[{ position: "top", fontSize: 12 }]}
/>;

With Legend

<BarChart
  data={data}
  series={series}
  categoryKey="category"
  withLegend
/>;

Custom Border Radius

<BarChart
  data={data}
  series={series}
  categoryKey="category"
  borderRadius={[8, 8, 0, 0]}
/>;

With Cartesian Grid and Tooltip

<BarChart
  data={data}
  series={series}
  categoryKey="category"
  showCartesianGrid
  showCursor
/>;

Features

• Supports vertical or horizontal layout.
• Supports stacked and grouped bars.
• Fully customizable tooltips, legends, and labels.
• Customizable bar border radius.
• Optional Cartesian grid.
• Smooth integration with TailwindCSS via className.

Notes

• labelList allows multiple labels on each bar.
• borderRadius works differently for stacked vs. non-stacked bars.
• series order determines rendering order and stacking sequence.