Get started with @mantine/charts package
After installation, import package styles at the root of your application:
Followed the installation instructions above but something is not working (misplaced tooltips or no colors)? You've fallen into the trap of not importing chart styles! To fix the issue, import chart styles at the root of your application:
Most of the components in the @mantine/charts package are based on the recharts library. If you need advanced features that are not covered in the @mantine/charts documentation, refer to the recharts documentation for more information.
All @mantine/charts components include an accessibility layer that makes charts navigable with the keyboard. The chart surface is focusable: once it receives focus (for example, with the Tab key), the arrow keys move the active tooltip point-by-point, so users who do not use a mouse can read the underlying values. The feature is enabled by default on all recharts-based charts.
The following keyboard interactions are supported:
When the chart surface is focused with the keyboard, it displays the Mantine focus ring so that the focused chart is clearly visible.
The accessibility layer is controlled with the accessibilityLayer prop, which is true by default on all charts. Set it to false to opt out of keyboard navigation, for example when a chart is embedded inside another widget that already handles keyboard interactions:
The accessibilityLayer prop is supported by AreaChart , BarChart , LineChart , CompositeChart , ScatterChart , BubbleChart , PieChart , DonutChart , RadarChart , RadialBarChart and FunnelChart components.