RadialBarChart

Radial bar chart component

Source

View source code

Docs

Edit this page

Package

@mantine/charts

Usage

RadialBarChart is based on RadialBarChart recharts component:

import { RadialBarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <RadialBarChart data={data} dataKey="value" h={220} />;
}

Change color

You can reference theme colors or use any valid CSS color in color property of data:

Color

import { RadialBarChart } from '@mantine/charts';

const data = [
    { name: '18-24', value: 31.47, color: 'blue' },
    { name: '25-29', value: 26.69, color: 'blue' },
    { name: '30-34', value: 15.69, color: 'blue' },
    { name: '35-39', value: 8.22, color: 'blue' },
    { name: '40-49', value: 8.63, color: 'blue' },
    { name: '50+', value: 2.63, color: 'blue' },
    { name: 'unknown', value: 6.67, color: 'blue' },
  ];

function Demo() {
  return <RadialBarChart data={data} dataKey="value" h={220} w={220} />;
}

Legend

To show legend, set withLegend prop:

import { RadialBarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <RadialBarChart data={data} dataKey="value" h={220} withLegend />;
}

Labels

To show labels, set withLabels prop:

import { RadialBarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <RadialBarChart data={data} dataKey="value" h={280} withLabels />;
}

Hide tooltip

To hide tooltip, set withTooltip={false} prop:

import { RadialBarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <RadialBarChart data={data} dataKey="value" h={220} withTooltip={false} />;
}

BubbleChart

Sparkline