LineBarChart

Updated: May 14, 2025

The LineBarChart component provides a way to display line 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.

Traffic Per WeekdayHow many users we had per weekday

Which series is which

Order decides the shape: the first series is drawn as the line, the second as the bars. There is no prop for it, and only the first two series are drawn — a third is ignored.

There is a single y axis, so the two measures are plotted against the same scale. That makes the chart a comparison of two quantities of comparable magnitude — sessions against conversions, budget against spend — not a way to overlay a rate on a volume. Pair a percentage with a count and the percentage collapses onto the baseline: it is not missing, it is drawn at 4 on an axis that runs to 8000. If that is the chart you want, normalise the small series into the same units first, or put the two measures in separate charts.

Budget against spendTwo measures on one scale — which is what this chart is for

API reference

The line's shape comes from curve and the bars' thickness from barWidth — the same props as LineChart and BarChart, which is what makes swapping between the three cheap.

Prop	Type	Default
barWidth Bar thickness.	numberxllmsxsfill	l
curve Recharts interpolation for the line: natural, linear, step, stepBefore, stepAfter, monotone, basis, bump and their variants.	curveType	natural
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	—
series First entry is drawn as the line, second as the bars. Further entries are ignored. Both share one y axis.	SeriesConfig[]	—

DataBarChart

DataPieChart

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club

LineBarChart

Which series is which

Both series share one y axis

API reference