Bar Chart

setup

npm install @mantine/charts recharts

import "@mantine/charts/styles.css"

bar chart

Mantine's BarChart components primarily displays vertical bars.

For each index, we display one or several bars, depending on how many data series we display at once.

data for a given index

The chart library expects an object for each index. We select the property that acts as the label. The remaining properties act as magnitudes:

{ month: "Jan", iPhoneSales: 1700, macSales: 17 }

one or more series

Magnitudes that spread over all indexes make a distinct series. For example, we could have the following magnitudes for each month:

• iponeSales
• macSales

At the BarChart level, we set

• the property that provides the index labels (here month)
• for each series, we provide:
  • the series' name
  • the color
  • the label for the bar.

<BarChart
    data={{ month: "Jan", iPhoneSales: 1700, macSales: 17 }, /* ... */}
    dataKey="month" // key that provides index labels
    h={300}
    series={[
        // series configuration
        { name: "iPhoneSales", color: "blue.6", label: "iPhone sales" },
    		{ name: "macSales", color: "green.6", label: "Mac sales" },
    ]}
/>