BarChart

Updated: May 14, 2025

The BarChart component provides a way to display bar charts with interactive features, including hover effects, click events, and custom styling options. It supports various customization options including different chart types, color schemes, and interactive features.

The TikTok TakeoverAvg. daily time spent per user on TikTok (minutes)

Daily Time Spent on ActivitiesSocial media vs. reading

Quarterly revenueHow much dough we made per quarter in 2023 and 2024

Wealth distributionGlobal share of wealth held by Top 1% vs Bottom 99%, 2000–2025

Bar width

barWidth takes a t-shirt token, a pixel number, or "fill" to let the bars consume the whole band with no gap between them. Wider bars read better for a handful of categories; "s" or a number keeps a long series legible.

Same data, three widthsbarWidth: fill

Moving an axis

reverseX and reverseY move an axis to the opposite side of the plot — the x axis to the top, the y axis to the right. They reposition the labels; they do not reverse the scale, and the data is untouched. Reach for reverseY when the chart sits at the left edge of a layout and the labels read better on the inside, or when two charts are placed side by side and you want their axes on the outer edges.

Y axis on the rightreverseY

Hover

hover paints the whole band behind the bar on pointer-over, which makes a dense chart easier to read across — the row you are pointing at is the one lighting up, rather than just the bar you happened to hit.

Hover the bandshover

API reference

Prop	Type	Default
barWidth Bar thickness. "fill" removes the gap between bands.	numberxllmsxsfill	l
hover Highlight the whole band on pointer-over.	boolean	false
reverseY Move the y axis to the right.	boolean	false
reverseX Move the x axis to the top.	boolean	false
legend Legend position and visibility.	LegendConfig	{}
error Render the error state instead of the chart.	boolean	false
tooltip Show a tooltip on hover.	boolean	true
grid Which grid lines to draw.	xybothnone	y
axis Which axes to label.	xybothnone	both
loading Render the loading state instead of the chart.	boolean	false
border Panel border colour. false removes it.	Colorssurfacetransparentboolean	neutral-alpha-weak
…and every ChartProps prop	inherited	—
…and every FlexProps prop	inherited	—

DataLineChart

DataLineBarChart

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club