Skip to content

Charts - Overview

This page groups general topics that are common to multiple charts.

⚠️ This is an upcoming library. Please upvote 👍 features you would like to see first. And comments if you have specific needs to be solved by them.

Display charts

Charts can be rendered in two ways. With a single component or by composing sub components.

Single charts

For common use case, single component is the recommended way.

You have to provide the series props. The width and height if the component is not responsive.

bar Abar Bbar CBottom X axisbar Abar Bbar CTop X axis024Left Y axis024Right Y axis

Multiple charts

To combine different charts, like lines with bars, you can use composition with <ChartContainer /> and <CartesianContextProvider /> wrappers.

Inside those wrappers, you can render <XAxis />, <YAxis />, or any plot component (<BarPlot />, <LinePlot />, <ScatterPlot />)

20102011201220132014Years0510Results1k2k10kPIB

Axis management

Multiple axis scales

Axis customization

Zoom management

Data selection