Getting started

Installation

yarn add @mantine/charts recharts

npm install @mantine/charts recharts

After installation, import package styles at the root of your application:

import '@mantine/core/styles.css';
// ‼️ import charts styles after core package styles
import '@mantine/charts/styles.css';

Do not forget to import styles

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:

import '@mantine/charts/styles.css';

Based on recharts

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.