Bar Chart

v0.2.2

Fully presentational bar chart widget using Recharts. Supports multiple bars, stacked bars, horizontal/vertical layouts, custom styling, and responsive design.

View as Markdown

Install

npx shadcn@latest add @signalos/bar-chart

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/chart-core) are pulled automatically.

Preview

Example & code

bar-chart.example.tsx

import { BarChart } from "@/components/widgets/bar-chart/BarChart"

const data = [
  { product: "Product A", sales: 4000, returns: 400 },
  { product: "Product B", sales: 3000, returns: 300 },
  { product: "Product C", sales: 2000, returns: 200 },
  { product: "Product D", sales: 2780, returns: 278 },
  { product: "Product E", sales: 1890, returns: 189 },
]

export default function BarChartExample() {
  return (
    <BarChart
      data={data}
      bars={[
        { dataKey: "sales", name: "Sales", fill: "var(--chart-1)" },
        { dataKey: "returns", name: "Returns", fill: "var(--chart-2)" },
      ]}
      xAxis={{ dataKey: "product" }}
      yAxis={{ tickFormatter: (value) => `$${value}` }}
      height={350}
    />
  )
}

Props

BarChartDataPoint

Prop	Type	Default	Description

BarChartBar

Prop	Type	Default	Description
dataKey*	`string`	-	The data key to plot from your data points
name	`string \| undefined`	-	Display name for the legend and tooltip
fill	`string \| undefined`	-	Bar fill color (use CSS custom property or hex)
stroke	`string \| undefined`	-	Bar stroke color
strokeWidth	`number \| undefined`	-	Bar stroke width
stackId	`string \| undefined`	-	Stack ID for stacked bars (bars with same stackId will stack)
radius	`number \| [number, number, number, number] \| undefined`	-	Radius for bar corners [topLeft, topRight, bottomRight, bottomLeft]
animationDuration	`number \| undefined`	-	Whether to animate the bar on mount

BarChartAxis

Prop	Type	Default	Description
dataKey	`string \| undefined`	-	The data key for this axis
axisLine	`boolean \| undefined`	-	Whether to show the axis line
tickLine	`boolean \| undefined`	-	Whether to show tick marks
tickFormatter	`((value: unknown) => string) \| undefined`	-	Custom tick formatter function
label	`string \| { value: string; angle?: number \| undefined; position?: string \| undefined; } \| undefined`	-	Label for the axis
hide	`boolean \| undefined`	-	Whether to hide the axis entirely
tick	`boolean \| object \| undefined`	-	Axis tick styles

BarChartGrid

Prop	Type	Default	Description
horizontal	`boolean \| undefined`	-	Show horizontal grid lines
vertical	`boolean \| undefined`	-	Show vertical grid lines
stroke	`string \| undefined`	-	Grid line stroke color
strokeDasharray	`string \| undefined`	-	Grid line stroke dash pattern

BarChartLegend

Prop	Type	Default	Description
verticalAlign	`"bottom" \| "top" \| "middle" \| undefined`	-	Legend position
align	`"left" \| "center" \| "right" \| undefined`	-
layout	`"horizontal" \| "vertical" \| undefined`	-	Legend layout
iconType	`"line" \| "plainline" \| "square" \| "rect" \| "circle" \| "cross" \| "diamond" \| "star" \| "triangle" \| "wye" \| undefined`	-	Custom icon type
formatter	`((value: string) => ReactNode) \| undefined`	-	Custom legend formatter

BarChartTooltip

Prop	Type	Default	Description
labelFormatter	`((label: unknown) => ReactNode) \| undefined`	-	Custom tooltip formatter for label
formatter	`((value: ValueType, name: NameType, entry: Payload<ValueType, NameType>) => ReactNode) \| undefined`	-	Custom tooltip formatter for values
cursor	`boolean \| object \| undefined`	-	Cursor style

BarChartProps

Prop	Type	Default	Description
data*	`BarChartDataPoint[]`	-	Array of data points to plot
bars*	`BarChartBar[]`	-	Array of bar configurations
width	`number \| undefined`	-	Chart width in pixels
height	`number \| undefined`	-	Chart height in pixels
layout	`"horizontal" \| "vertical" \| undefined`	-	Bar layout: "horizontal" = standard upright bars (default), "vertical" = sideways bars
xAxis	`BarChartAxis \| undefined`	-	X-axis configuration
yAxis	`BarChartAxis \| undefined`	-	Y-axis configuration
grid	`boolean \| BarChartGrid \| undefined`	-	Grid configuration
legend	`boolean \| BarChartLegend \| undefined`	-	Legend configuration (false to hide)
tooltip	`boolean \| BarChartTooltip \| undefined`	-	Tooltip configuration (false to hide)
margin	`{ top?: number \| undefined; right?: number \| undefined; bottom?: number \| undefined; left?: number \| undefined; } \| undefined`	-	Chart margin (top, right, bottom, left)
isLoading	`boolean \| undefined`	-	Loading state
emptyState	`ReactNode`	-	Empty state content
onBarClick	`((data: unknown, index: number) => void) \| undefined`	-	Click handler for bar data points
responsive	`boolean \| undefined`	-	Responsive container (auto-sizes to parent)
className	`string \| undefined`	-	Container className
style	`CSSProperties \| undefined`	-	Custom container styles

npm dependencies

recharts@^2.15.0

Changelog

Changelog - BarChart

0.2.2

Fix onBarClick's index argument always being 0 regardless of which bar was clicked. Now derived from Recharts' activeTooltipIndex via chart-core's resolveChartClickIndex.

0.2.1

Update data-testid call sites for the renamed prop.

0.2.0

Factor shared colors, tooltip/legend config, skeleton, and empty state into the chart-core widget; public API unchanged.

0.1.1

Fixed axis type/dataKey mapping — layout="horizontal" now correctly renders category X-axis and numeric Y-axis (was inverted).
Changed default layout from "vertical" to "horizontal" (standard upright bars).
Stacked bars (stackId set) now default to radius={0} to avoid gaps between segments.
Replaced any types with proper Recharts types (ValueType, NameType, Payload) in BarChartTooltip.formatter, labelFormatter, tickFormatter, and onBarClick.

0.1.0

Initial release.

Bar chart component with Recharts integration
Support for multiple bars with custom colors and styling
Stacked bars support via stackId
Horizontal and vertical layouts
Configurable axes, grid, legend, and tooltip
Custom bar radius for rounded corners
Responsive container support
Loading skeleton and empty state
Fully presentational (props-in/events-out pattern)