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.

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={600}
  height={500}
/>

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={600}
  height={500}
/>

Press Enter to start editing

Multiple charts

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

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

Charts - Overview

Display charts

Single charts

Multiple charts

Axis management

Multiple axis scales

Axis customization

Zoom management

Data selection