Chart Demos

These charts provide an intuitive and easily understandable means of visualizing data sets. Each chart should convey a narrative and align with the content on the page where it is located.

Magma Charts demo site

Every example below passes chartToolbar={{}} to CarbonChart. This opts the chart into the accessible Magma toolbar ("Show as table", fullscreen, and "More options" with CSV/PNG/JPG downloads), and replaces Carbon's inaccessible <p role="heading"> chart title with a semantic heading read from options.title. The default is <h2>; use chartToolbar.titleLevel to select <h1> through <h6> for the surrounding page hierarchy. See the Toolbar customization section below for advanced options, and Getting Started for the underlying accessibility rationale.

Area (simple)

Area charts share similarities with line charts, distinguished by the filled areas below the lines.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.area,
    dataSet: [
      {
        group: 'Dataset 1',
        date: '2019-01-01T05:00:00.000Z',
        value: 0,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-06T05:00:00.000Z',
        value: -37312,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-08T05:00:00.000Z',
        value: -22392,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-15T05:00:00.000Z',
        value: -52576,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-19T05:00:00.000Z',
        value: 20135,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-01T05:00:00.000Z',
        value: 47263,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-05T05:00:00.000Z',
        value: 14178,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-08T05:00:00.000Z',
        value: 23094,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-13T05:00:00.000Z',
        value: 45281,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-19T05:00:00.000Z',
        value: -63954,
      },
    ],
    options: {
      title: 'Area (time series - natural curve)',
      axes: {
        bottom: {
          title: '2019 Annual Sales Figures',
          mapsTo: 'date',
          scaleType: 'time',
        },
        left: {
          mapsTo: 'value',
          scaleType: 'linear',
        },
      },
      curve: 'curveNatural',
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

7 more demos

Area (stacked)

A stacked area chart is a graph that shows how the values of multiple groups change over time.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.areaStacked,
    dataSet: [
      {
        group: 'Dataset 1',
        date: '2019-01-01T05:00:00.000Z',
        value: 10000,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-05T05:00:00.000Z',
        value: 65000,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-08T05:00:00.000Z',
        value: 10000,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-13T05:00:00.000Z',
        value: 49213,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-17T05:00:00.000Z',
        value: 51213,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-01T05:00:00.000Z',
        value: 20000,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-05T05:00:00.000Z',
        value: 25000,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-08T05:00:00.000Z',
        value: 60000,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-13T05:00:00.000Z',
        value: 30213,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-17T05:00:00.000Z',
        value: 55213,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-01T05:00:00.000Z',
        value: 30000,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-05T05:00:00.000Z',
        value: 20000,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-08T05:00:00.000Z',
        value: 40000,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-13T05:00:00.000Z',
        value: 60213,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-17T05:00:00.000Z',
        value: 25213,
      },
    ],
    options: {
      title: 'Stacked area (time series)',
      axes: {
        left: {
          stacked: true,
          scaleType: 'linear',
          mapsTo: 'value',
        },
        bottom: {
          scaleType: 'time',
          mapsTo: 'date',
        },
      },
      curve: 'curveMonotoneX',
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

3 more demos

Bar (simple)

Bar charts use vertical or horizontal markers to compare values, allowing for assessment of discrete data or trends over time.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.bar,
    dataSet: [
      {
        group: 'Qty',
        value: 65000,
      },
      {
        group: 'More',
        value: 29123,
      },
      {
        group: 'Sold',
        value: 35213,
      },
      {
        group: 'Restocking',
        value: 51213,
      },
      {
        group: 'Misc',
        value: 16932,
      },
    ],
    options: {
      title: 'Vertical simple bar (discrete)',
      axes: {
        left: {
          mapsTo: 'value',
        },
        bottom: {
          mapsTo: 'group',
          scaleType: 'labels',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

8 more demos

Bar (floating)

A floating bar chart uses horizontal bars to represent data, spanning between the minimum and maximum values, and floating freely rather than being anchored to an axis.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.bar,
    dataSet: [
      {
        group: 'Qty',
        date: new Date(2019, 0, 1),
        value: [10000, 41000],
      },
      {
        group: 'More',
        date: new Date(2019, 0, 2),
        value: 65000,
      },
      {
        group: 'Sold',
        date: new Date(2019, 0, 3),
        value: 30000,
      },
      {
        group: 'Restocking',
        date: new Date(2019, 0, 6),
        value: [22000, 69213],
      },
      {
        group: 'Misc',
        date: new Date(2019, 0, 7),
        value: [3500, 71213],
      },
    ],
    options: {
      title: 'Horizontal floating bar (time series)',
      axes: {
        left: {
          mapsTo: 'date',
          scaleType: 'time',
        },
        bottom: {
          mapsTo: 'value',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

2 more demos

Bar (grouped)

A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is used to compare values across multiple categories.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.barGrouped,
    dataSet: [
      {
        group: 'Dataset 1',
        key: 'Qty',
        value: 65000,
      },
      {
        group: 'Dataset 1',
        key: 'More',
        value: -29123,
      },
      {
        group: 'Dataset 1',
        key: 'Sold',
        value: -35213,
      },
      {
        group: 'Dataset 1',
        key: 'Restocking',
        value: 51213,
      },
      {
        group: 'Dataset 1',
        key: 'Misc',
        value: 16932,
      },
      {
        group: 'Dataset 2',
        key: 'Qty',
        value: 32432,
      },
      {
        group: 'Dataset 2',
        key: 'More',
        value: -21312,
      },
      {
        group: 'Dataset 2',
        key: 'Sold',
        value: -56456,
      },
      {
        group: 'Dataset 2',
        key: 'Restocking',
        value: -21312,
      },
      {
        group: 'Dataset 2',
        key: 'Misc',
        value: 34234,
      },
      {
        group: 'Dataset 3',
        key: 'Qty',
        value: -12312,
      },
      {
        group: 'Dataset 3',
        key: 'More',
        value: 23232,
      },
      {
        group: 'Dataset 3',
        key: 'Sold',
        value: 34232,
      },
      {
        group: 'Dataset 3',
        key: 'Restocking',
        value: -12312,
      },
      {
        group: 'Dataset 3',
        key: 'Misc',
        value: -34234,
      },
      {
        group: 'Dataset 4',
        key: 'Qty',
        value: -32423,
      },
      {
        group: 'Dataset 4',
        key: 'More',
        value: 21313,
      },
      {
        group: 'Dataset 4',
        key: 'Sold',
        value: 64353,
      },
      {
        group: 'Dataset 4',
        key: 'Restocking',
        value: 24134,
      },
      {
        group: 'Dataset 4',
        key: 'Misc',
        value: 24134,
      },
    ],
    options: {
      title: 'Vertical grouped bar (discrete)',
      axes: {
        left: {
          mapsTo: 'value',
        },
        bottom: {
          scaleType: 'labels',
          mapsTo: 'key',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

9 more demos

Bar (stacked)

A stacked bar chart, also called a stacked bar graph or stacked column chart, compares multiple variables over time.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.barStacked,
    dataSet: [
      {
        group: 'Dataset 1',
        key: 'Qty',
        value: 65000,
      },
      {
        group: 'Dataset 1',
        key: 'More',
        value: 29123,
      },
      {
        group: 'Dataset 1',
        key: 'Sold',
        value: 35213,
      },
      {
        group: 'Dataset 1',
        key: 'Restocking',
        value: 51213,
      },
      {
        group: 'Dataset 1',
        key: 'Misc',
        value: 16932,
      },
      {
        group: 'Dataset 2',
        key: 'Qty',
        value: 32432,
      },
      {
        group: 'Dataset 2',
        key: 'More',
        value: 21312,
      },
      {
        group: 'Dataset 2',
        key: 'Sold',
        value: 56456,
      },
      {
        group: 'Dataset 2',
        key: 'Restocking',
        value: 21312,
      },
      {
        group: 'Dataset 2',
        key: 'Misc',
        value: 34234,
      },
      {
        group: 'Dataset 3',
        key: 'Qty',
        value: 12312,
      },
      {
        group: 'Dataset 3',
        key: 'More',
        value: 23232,
      },
      {
        group: 'Dataset 3',
        key: 'Sold',
        value: 34232,
      },
      {
        group: 'Dataset 3',
        key: 'Restocking',
        value: 12312,
      },
      {
        group: 'Dataset 3',
        key: 'Misc',
        value: 34234,
      },
      {
        group: 'Dataset 4',
        key: 'Qty',
        value: 32423,
      },
      {
        group: 'Dataset 4',
        key: 'More',
        value: 21313,
      },
      {
        group: 'Dataset 4',
        key: 'Sold',
        value: 64353,
      },
      {
        group: 'Dataset 4',
        key: 'Restocking',
        value: 24134,
      },
      {
        group: 'Dataset 4',
        key: 'Misc',
        value: 32423,
      },
    ],
    options: {
      title: 'Vertical stacked bar (discrete)',
      axes: {
        left: {
          mapsTo: 'value',
          stacked: true,
        },
        bottom: {
          mapsTo: 'key',
          scaleType: 'labels',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

10 more demos

Boxplot

A boxplot, or box and whisker plot, summarizes a set of data, showing its distribution and any outliers.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.boxplot,
    dataSet: [
      {
        group: 'Q1',
        key: 'Monday',
        value: 65000,
      },
      {
        group: 'Q1',
        key: 'Tuesday',
        value: 29123,
      },
      {
        group: 'Q1',
        key: 'Wednesday',
        value: 35213,
      },
      {
        group: 'Q1',
        key: 'Thursday',
        value: 51213,
      },
      {
        group: 'Q1',
        key: 'Friday',
        value: 16932,
      },
      {
        group: 'Q2',
        key: 'Monday',
        value: 32432,
      },
      {
        group: 'Q2',
        key: 'Tuesday',
        value: 14312,
      },
      {
        group: 'Q2',
        key: 'Wednesday',
        value: 66456,
      },
      {
        group: 'Q2',
        key: 'Thursday',
        value: 21312,
      },
      {
        group: 'Q2',
        key: 'Friday',
        value: 37234,
      },
      {
        group: 'Q3',
        key: 'Monday',
        value: 5312,
      },
      {
        group: 'Q3',
        key: 'Tuesday',
        value: 23232,
      },
      {
        group: 'Q3',
        key: 'Wednesday',
        value: 34232,
      },
      {
        group: 'Q3',
        key: 'Thursday',
        value: 12312,
      },
      {
        group: 'Q3',
        key: 'Friday',
        value: 44234,
      },
      {
        group: 'Q4',
        key: 'Monday',
        value: 32423,
      },
      {
        group: 'Q4',
        key: 'Tuesday',
        value: 21313,
      },
      {
        group: 'Q4',
        key: 'Wednesday',
        value: 64353,
      },
      {
        group: 'Q4',
        key: 'Thursday',
        value: 24134,
      },
      {
        group: 'Q4',
        key: 'Friday',
        value: 45134,
      },
    ],
    options: {
      title: 'Horizontal box plot',
      axes: {
        bottom: {
          mapsTo: 'value',
        },
        left: {
          scaleType: 'labels',
          mapsTo: 'group',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

1 more demo

Bubble

A bubble chart, or bubble plot, uses bubbles to represent data points and their relationships in a two-dimensional plot.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.bubble,
    dataSet: [
      {
        group: 'Dataset 1',
        sales: 10000,
        profit: 32100,
        surplus: 50000,
      },
      {
        group: 'Dataset 1',
        sales: 12000,
        profit: 23500,
        surplus: 34000,
      },
      {
        group: 'Dataset 1',
        sales: 14000,
        profit: 53100,
        surplus: 63000,
      },
      {
        group: 'Dataset 1',
        sales: 15000,
        profit: 42300,
        surplus: 43000,
      },
      {
        group: 'Dataset 1',
        sales: 16000,
        profit: 12300,
        surplus: 55000,
      },
      {
        group: 'Dataset 2',
        sales: 11000,
        profit: 12400,
        surplus: 25000,
      },
      {
        group: 'Dataset 2',
        sales: 13000,
        profit: 34500,
        surplus: 35000,
      },
      {
        group: 'Dataset 2',
        sales: 13500,
        profit: 23100,
        surplus: 55000,
      },
      {
        group: 'Dataset 2',
        sales: 15500,
        profit: 63200,
        surplus: 35000,
      },
      {
        group: 'Dataset 2',
        sales: 15750,
        profit: 24300,
        surplus: 64000,
      },
    ],
    options: {
      title: 'Bubble (linear)',
      axes: {
        bottom: {
          title: 'No. of employees',
          mapsTo: 'sales',
          includeZero: false,
        },
        left: {
          title: 'Annual sales',
          mapsTo: 'profit',
          includeZero: false,
        },
      },
      bubble: {
        radiusMapsTo: 'surplus',
        radiusLabel: 'Surplus',
      },
      legend: {
        additionalItems: [
          {
            type: 'radius',
            name: 'Surplus',
          },
        ],
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

5 more demos

Bullet

Bullet charts are commonly used in dashboards to effectively compare metrics against target benchmarks or predefined ranges.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.bullet,
    dataSet: [
      {
        title: 'Item E',
        group: 'D3',
        ranges: [350, 650, 980],
        marker: 1575,
        value: 400,
      },
      {
        title: 'Item D',
        group: 'D2',
        ranges: [750, 1200, null],
        marker: 1725,
        value: 2100,
      },
      {
        title: 'Item C',
        group: 'D3',
        ranges: [350, 500, 1005],
        marker: 1340,
        value: 550,
      },
      {
        title: 'Item B',
        group: 'D1',
        ranges: [300, 895, 1600],
        marker: 1455,
        value: 1000,
      },
      {
        title: 'Item A',
        group: 'D1',
        ranges: [800, 1000, 1400],
        marker: 1275,
        value: 250,
      },
    ],
    options: {
      title: 'Basic bullet',
      axes: {
        bottom: {
          mapsTo: 'value',
          extendLinearDomainBy: 'marker',
        },
        left: {
          scaleType: 'labels',
          mapsTo: 'title',
        },
        right: {
          scaleType: 'labels-ratio',
          mapsTo: 'title',
        },
      },
      height: '251px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

Combo

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.combo,
    dataSet: [
      {
        group: 'School A',
        date: 'Monday',
        value: 10000,
      },
      {
        group: 'School A',
        date: 'Tuesday',
        value: 65000,
      },
      {
        group: 'School A',
        date: 'Wednesday',
        value: 30000,
      },
      {
        group: 'School A',
        date: 'Thursday',
        value: 49213,
      },
      {
        group: 'School A',
        date: 'Friday',
        value: 49213,
      },
      {
        group: 'Temperature',
        date: 'Monday',
        temp: 70,
      },
      {
        group: 'Temperature',
        date: 'Tuesday',
        temp: 75,
      },
      {
        group: 'Temperature',
        date: 'Wednesday',
        temp: 31,
      },
      {
        group: 'Temperature',
        date: 'Thursday',
        temp: 31,
      },
      {
        group: 'Temperature',
        date: 'Friday',
        temp: 43,
      },
    ],
    options: {
      title: 'Combo (Line + Simple bar) - custom configs',
      axes: {
        left: {
          mapsTo: 'value',
          scaleType: 'linear',
          title: 'USA Summer School Attendance',
        },
        right: {
          mapsTo: 'temp',
          scaleType: 'linear',
          title: 'Temperature (°F)',
          correspondingDatasets: ['Temperature'],
        },
        bottom: {
          title: 'Day of the Week',
          mapsTo: 'date',
          scaleType: 'labels',
        },
      },
      comboChartTypes: [
        {
          type: 'simple-bar',
          correspondingDatasets: ['School A'],
        },
        {
          type: 'line',
          options: {
            points: {
              radius: 5,
            },
          },
          correspondingDatasets: ['Temperature'],
        },
      ],
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

11 more demos

Donut

A donut chart is a type of pie chart with a hole in the middle. It shows the relationship of parts to a whole and the percentage each value contributes to the total.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.donut,
    dataSet: [
      {
        group: '2V2N 9KYPM version 1',
        value: 20000,
      },
      {
        group: 'L22I P66EP L22I P66EP L22I P66EP',
        value: 65000,
      },
      {
        group: 'JQAI 2M4L1',
        value: 75000,
      },
      {
        group: 'J9DZ F37AP',
        value: 1200,
      },
      {
        group: 'YEL48 Q6XK YEL48',
        value: 10000,
      },
      {
        group: 'Misc',
        value: 25000,
      },
    ],
    options: {
      title: 'Donut',
      resizable: true,
      donut: {
        center: {
          label: 'Browsers',
        },
      },
      height: '400px',
      legend: {
        truncation: {
          type: 'none',
        },
      },
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

4 more demos

Gauge

A gauge chart, also known as a dial or speedometer chart, displays a single data value quantitatively.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.gauge,
    dataSet: [
      {
        group: 'value',
        value: 42,
      },
      {
        group: 'delta',
        value: -13.37,
      },
    ],
    options: {
      title: 'Gauge semicircular -- danger status',
      resizable: true,
      height: '250px',
      gauge: {
        type: 'semi',
        status: 'danger',
      },
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

1 more demo

Histogram

A histogram is a statistical chart depicting the distribution of a continuous dataset using bars, with each bar representing a specific category or class interval.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.histogram,
    dataSet: [
      {
        group: 'Dataset 1',
        age: 20,
      },
      {
        group: 'Dataset 2',
        age: 21,
      },
      {
        group: 'Dataset 2',
        age: 23,
      },
      {
        group: 'Dataset 3',
        age: 21,
      },
      {
        group: 'Dataset 3',
        age: 23,
      },
      {
        group: 'Dataset 3',
        age: 24,
      },
      {
        group: 'Dataset 1',
        age: 30,
      },
      {
        group: 'Dataset 2',
        age: 34,
      },
      {
        group: 'Dataset 1',
        age: 35,
      },
      {
        group: 'Dataset 3',
        age: 30,
      },
      {
        group: 'Dataset 1',
        age: 40,
      },
      {
        group: 'Dataset 2',
        age: 43,
      },
      {
        group: 'Dataset 1',
        age: 45,
      },
      {
        group: 'Dataset 1',
        age: 46,
      },
      {
        group: 'Dataset 3',
        age: 40,
      },
      {
        group: 'Dataset 3',
        age: 43,
      },
      {
        group: 'Dataset 3',
        age: 45,
      },
      {
        group: 'Dataset 1',
        age: 48,
      },
      {
        group: 'Dataset 1',
        age: 50,
      },
      {
        group: 'Dataset 2',
        age: 55,
      },
      {
        group: 'Dataset 2',
        age: 66,
      },
      {
        group: 'Dataset 2',
        age: 58,
      },
      {
        group: 'Dataset 1',
        age: 70,
      },
      {
        group: 'Dataset 1',
        age: 78,
      },
      {
        group: 'Dataset 3',
        age: 71,
      },
      {
        group: 'Dataset 3',
        age: 75,
      },
      {
        group: 'Dataset 2',
        age: 83,
      },
      {
        group: 'Dataset 2',
        age: 86,
      },
      {
        group: 'Dataset 1',
        age: 87,
      },
    ],
    options: {
      title: 'Histogram (linear)',
      axes: {
        bottom: {
          title: 'Age',
          mapsTo: 'age',
          bins: 10,
          limitDomainToBins: true,
        },
        left: {
          title: 'No. of participants',
          scaleType: 'linear',
          stacked: true,
          binned: true,
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

2 more demos

Line

Line charts depict data at regular intervals, connecting points with lines. They are valuable for illustrating trends over time and comparing multiple datasets.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.line,
    dataSet: [
      {
        group: 'Dataset 1',
        key: 'Qty',
        value: 34200,
      },
      {
        group: 'Dataset 1',
        key: 'More',
        value: 23500,
      },
      {
        group: 'Dataset 1',
        key: 'Sold',
        value: 53100,
      },
      {
        group: 'Dataset 1',
        key: 'Restocking',
        value: 42300,
      },
      {
        group: 'Dataset 1',
        key: 'Misc',
        value: 12300,
      },
      {
        group: 'Dataset 2',
        key: 'Qty',
        value: 34200,
      },
      {
        group: 'Dataset 2',
        key: 'More',
        value: 53200,
      },
      {
        group: 'Dataset 2',
        key: 'Sold',
        value: 42300,
      },
      {
        group: 'Dataset 2',
        key: 'Restocking',
        value: 21400,
      },
      {
        group: 'Dataset 2',
        key: 'Misc',
        value: 0,
      },
      {
        group: 'Dataset 3',
        key: 'Qty',
        value: 41200,
      },
      {
        group: 'Dataset 3',
        key: 'More',
        value: 18400,
      },
      {
        group: 'Dataset 3',
        key: 'Sold',
        value: 34210,
      },
      {
        group: 'Dataset 3',
        key: 'Restocking',
        value: 1400,
      },
      {
        group: 'Dataset 3',
        key: 'Misc',
        value: 42100,
      },
      {
        group: 'Dataset 4',
        key: 'Qty',
        value: 22000,
      },
      {
        group: 'Dataset 4',
        key: 'More',
        value: 1200,
      },
      {
        group: 'Dataset 4',
        key: 'Sold',
        value: 9000,
      },
      {
        group: 'Dataset 4',
        key: 'Restocking',
        value: 24000,
        audienceSize: 10,
      },
      {
        group: 'Dataset 4',
        key: 'Misc',
        value: 3000,
        audienceSize: 10,
      },
    ],
    options: {
      title: 'Line (discrete)',
      axes: {
        bottom: {
          title: '2019 Annual Sales Figures',
          mapsTo: 'key',
          scaleType: 'labels',
        },
        left: {
          mapsTo: 'value',
          title: 'Conversion rate',
          scaleType: 'linear',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

16 more demos

Lollipop

A lollipop chart is a variation of a bar chart ideal for highlighting individual data points or illustrating the relationship between numeric and categorical variables.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.lollipop,
    dataSet: [
      {
        group: 'Dataset 1',
        key: 'Qty',
        value: 34200,
      },
      {
        group: 'Dataset 2',
        key: 'More',
        value: 34200,
      },
      {
        group: 'Dataset 3',
        key: 'Sold',
        value: 41200,
      },
      {
        group: 'Dataset 4',
        key: 'Restocking',
        value: 22000,
      },
    ],
    options: {
      title: 'Lollipop (discrete)',
      axes: {
        bottom: {
          title: '2019 Annual Sales Figures',
          scaleType: 'labels',
          mapsTo: 'key',
        },
        left: {
          mapsTo: 'value',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

1 more demo

Meter

Meter charts are used to measure the rate of change of a quantity against pre-defined targets.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.meter,
    dataSet: [
      {
        group: 'Dataset 1',
        value: 56,
      },
    ],
    options: {
      title: 'Meter Chart - with statuses',
      meter: {
        peak: 80,
        status: {
          ranges: [
            {
              range: [0, 50],
              status: 'success',
            },
            {
              range: [50, 60],
              status: 'warning',
            },
            {
              range: [60, 100],
              status: 'danger',
            },
          ],
        },
      },
      height: '100px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

3 more demos

Pie

A pie chart visually summarizes nominal data or illustrates the distribution of values, such as percentage distribution.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.pie,
    dataSet: [
      {
        group: '2V2N 9KYPM version 1',
        value: 20000,
      },
      {
        group: 'L22I P66EP L22I P66EP L22I P66EP',
        value: 65000,
      },
      {
        group: 'JQAI 2M4L1',
        value: 75000,
      },
      {
        group: 'J9DZ F37AP',
        value: 1200,
      },
      {
        group: 'YEL48 Q6XK YEL48',
        value: 10000,
      },
      {
        group: 'Misc',
        value: 25000,
      },
    ],
    options: {
      title: 'Pie',
      resizable: true,
      height: '400px',
      legend: {
        truncation: {
          type: 'none',
        },
      },
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

4 more demos

Radar

A radar chart, or spider chart, web chart, or star chart, is a two-dimensional graph displaying multiple quantitative variables in a single visual.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.radar,
    dataSet: [
      {
        product: 'Product 1',
        feature: 'Price',
        score: 60,
      },
      {
        product: 'Product 1',
        feature: 'Usability',
        score: 92,
      },
      {
        product: 'Product 1',
        feature: 'Availability',
        score: 5,
      },
      {
        product: 'Product 1',
        feature: 'Performance',
        score: 85,
      },
      {
        product: 'Product 1',
        feature: 'Quality',
        score: 60,
      },
      {
        product: 'Product 2',
        feature: 'Price',
        score: 70,
      },
      {
        product: 'Product 2',
        feature: 'Usability',
        score: 63,
      },
      {
        product: 'Product 2',
        feature: 'Availability',
        score: 78,
      },
      {
        product: 'Product 2',
        feature: 'Performance',
        score: 50,
      },
      {
        product: 'Product 2',
        feature: 'Quality',
        score: 30,
      },
    ],
    options: {
      title: 'Radar',
      radar: {
        axes: {
          angle: 'feature',
          value: 'score',
        },
      },
      data: {
        groupMapsTo: 'product',
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

2 more demos

Scatter

Scatter plots use data points to plot two measures along a scale, allowing exploration of correlations between different variables.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.scatter,
    dataSet: [
      {
        group: 'Dataset 1',
        employees: 5000,
        sales: 32100,
      },
      {
        group: 'Dataset 1',
        employees: 3000,
        sales: 25100,
      },
      {
        group: 'Dataset 1',
        employees: 8000,
        sales: 12100,
      },
      {
        group: 'Dataset 1',
        employees: 4000,
        sales: 53100,
      },
      {
        group: 'Dataset 2',
        employees: 5000,
        sales: 32100,
      },
      {
        group: 'Dataset 2',
        employees: 2000,
        sales: 34100,
      },
      {
        group: 'Dataset 2',
        employees: 4000,
        sales: 23100,
      },
      {
        group: 'Dataset 2',
        employees: 7000,
        sales: 14100,
      },
      {
        group: 'Dataset 2',
        employees: 6000,
        sales: 53100,
      },
    ],
    options: {
      title: 'Scatter (linear x & y)',
      axes: {
        bottom: {
          title: 'No. of employees',
          mapsTo: 'employees',
          scaleType: 'linear',
        },
        left: {
          title: 'Annual sales',
          mapsTo: 'sales',
          scaleType: 'linear',
        },
      },
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

5 more demos

Sparkline

A Sparkline Chart is a small, simple chart that provides a compact visual representation of trends in data.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.area,
    dataSet: [
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:21:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:22:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:23:00.000Z',
        value: 5,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:24:00.000Z',
        value: 1,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:25:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:26:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:27:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:28:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:29:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:30:00.000Z',
        value: 0,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:31:00.000Z',
        value: 5,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:32:00.000Z',
        value: 5,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:33:00.000Z',
        value: 6,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:34:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:35:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:36:00.000Z',
        value: 6,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:38:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:39:00.000Z',
        value: 6,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:40:00.000Z',
        value: 0,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:41:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:42:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:43:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:44:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:45:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:46:00.000Z',
        value: 2,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:47:00.000Z',
        value: 4,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:48:00.000Z',
        value: 1,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:49:00.000Z',
        value: 1,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:50:00.000Z',
        value: 3,
      },
      {
        group: 'Dataset 1',
        date: '2019-05-21T19:51:00.000Z',
        value: 2,
      },
    ],
    options: {
      title: 'Sparkline',
      height: '400px',
      grid: {
        x: {
          enabled: false,
        },
        y: {
          enabled: false,
        },
      },
      axes: {
        bottom: {
          visible: false,
          title: '2019 Annual Sales Figures',
          mapsTo: 'date',
          scaleType: 'time',
        },
        left: {
          visible: false,
          mapsTo: 'value',
          scaleType: 'linear',
        },
      },
      color: {
        gradient: {
          enabled: true,
        },
      },
      points: {
        enabled: false,
      },
      legend: {
        enabled: false,
      },
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

Step

A Step Chart is a type of line chart that displays data as a series of steps rather than a smooth trend.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  const args = {
    type: CarbonChartType.line,
    dataSet: [
      {
        group: 'Dataset 1',
        date: '2018-12-31T23:00:00.000Z',
        value: 50000,
        surplus: 844630247.9315708,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-04T23:00:00.000Z',
        value: 65000,
        surplus: 722253377.7025548,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-07T23:00:00.000Z',
        value: null,
        surplus: 9586.628515900247,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-12T23:00:00.000Z',
        value: 49213,
        surplus: 519710030.3060996,
      },
      {
        group: 'Dataset 1',
        date: '2019-01-16T23:00:00.000Z',
        value: 51213,
        surplus: 964336709.1293422,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-01T23:00:00.000Z',
        value: 0,
        surplus: 24733.73210194359,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-05T23:00:00.000Z',
        value: 57312,
        surplus: 2104847.5679499935,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-07T23:00:00.000Z',
        value: 27432,
        surplus: 632664658.6542752,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-14T23:00:00.000Z',
        value: 70323,
        surplus: 1484604165.9194114,
      },
      {
        group: 'Dataset 2',
        date: '2019-01-18T23:00:00.000Z',
        value: 21300,
        surplus: 228423489.25766274,
      },
      {
        group: 'Dataset 3',
        date: '2018-12-31T23:00:00.000Z',
        value: 40000,
        surplus: 634264360.9426379,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-04T23:00:00.000Z',
        value: null,
        surplus: 781.4728603674881,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-07T23:00:00.000Z',
        value: 18000,
        surplus: 210741530.6295638,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-12T23:00:00.000Z',
        value: 39213,
        surplus: 135260712.71714658,
      },
      {
        group: 'Dataset 3',
        date: '2019-01-16T23:00:00.000Z',
        value: 61213,
        surplus: 313154331.2033775,
      },
      {
        group: 'Dataset 4',
        date: '2019-01-01T23:00:00.000Z',
        value: 20000,
        surplus: 450715657.7789645,
      },
      {
        group: 'Dataset 4',
        date: '2019-01-05T23:00:00.000Z',
        value: 37312,
        surplus: 60444212.38584305,
      },
      {
        group: 'Dataset 4',
        date: '2019-01-07T23:00:00.000Z',
        value: 51432,
        surplus: 1007946419.445114,
      },
      {
        group: 'Dataset 4',
        date: '2019-01-14T23:00:00.000Z',
        value: 25332,
        surplus: 281099594.1962531,
      },
      {
        group: 'Dataset 4',
        date: '2019-01-18T23:00:00.000Z',
        value: null,
        surplus: 1928.4268222770295,
      },
    ],
    options: {
      title: 'Step (time series)',
      axes: {
        bottom: {
          title: '2019 Annual Sales Figures',
          mapsTo: 'date',
          scaleType: 'time',
        },
        left: {
          mapsTo: 'value',
          title: 'Conversion rate',
          scaleType: 'linear',
        },
      },
      curve: 'curveStepAfter',
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} chartToolbar={{}} />
    </Card>
  );
}

Toolbar customization

The demos above use the default toolbar (chartToolbar={{}}). The chartToolbar object accepts options for adding menu items, customizing the data table, hiding individual buttons, and theming. See Getting Started for the full props reference and the list of standalone components exported from @react-magma/charts.

Additional "More options" items

Pass extra DropdownMenuItem elements to moreOptions to append custom actions below the built-in download items.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card, DropdownMenuItem } from 'react-magma-dom';

export function Example() {
  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.donut}
        dataSet={[
          { group: 'High performance', value: 50 },
          { group: 'Average performance', value: 30 },
          { group: 'Poor performance', value: 15 },
          { group: 'Not attempted', value: 5 },
        ]}
        options={{
          title: 'Overall Activity Performance',
          resizable: true,
          height: '400px',
          donut: {
            center: { label: 'Questions' },
          },
          legend: {
            truncation: { type: 'none' },
          },
        }}
        chartToolbar={{
          moreOptions: (
            <>
              <DropdownMenuItem onClick={() => alert('Print')}>
                Print chart
              </DropdownMenuItem>
            </>
          ),
        }}
      />
    </Card>
  );
}

Custom table columns

By default the table modal derives columns from the dataset keys (e.g. { group, value } becomes "Group" and "Value"). Override with tableColumns for custom headers.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.bar}
        dataSet={[
          { group: 'Chapter 1', value: 85 },
          { group: 'Chapter 2', value: 72 },
          { group: 'Chapter 3', value: 91 },
          { group: 'Chapter 4', value: 64 },
        ]}
        options={{
          title: 'Chapter Performance',
          axes: {
            left: { mapsTo: 'value' },
            bottom: { mapsTo: 'group', scaleType: 'labels' },
          },
          height: '400px',
        }}
        chartToolbar={{
          tableColumns: [
            { header: 'Chapter', key: 'group' },
            { header: 'Score (%)', key: 'value' },
          ],
        }}
      />
    </Card>
  );
}

Chart title heading level

By default, the accessible toolbar renders the chart title as an <h2>. Pass titleLevel when the chart needs to fit a different page heading hierarchy.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.bar}
        dataSet={[
          { group: 'Chapter 1', value: 85 },
          { group: 'Chapter 2', value: 72 },
          { group: 'Chapter 3', value: 91 },
          { group: 'Chapter 4', value: 64 },
        ]}
        options={{
          title: 'Chapter Performance',
          axes: {
            left: { mapsTo: 'value' },
            bottom: { mapsTo: 'group', scaleType: 'labels' },
          },
          height: '400px',
        }}
        chartToolbar={{
          titleLevel: 3,
        }}
      />
    </Card>
  );
}

Custom content around the title

titlePrefix and titleSuffix let you render custom content inline with the built-in chart title. They are the chart equivalent of the additionalContent prop on Input, and the same guidance applies: they work best with compact inline elements such as a Badge or a Tooltip wrapping an IconButton, with the button's aria-label matching the tooltip text.

Keep slot content inline-sized, as it shares the title row with the chart title. Interactive controls such as filters or comboboxes should be placed outside the chart. Content taller than the title row will overflow the chart, and controls with their own intrinsic width will squeeze the title instead of shrinking themselves.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import {
  Badge,
  ButtonSize,
  ButtonType,
  ButtonVariant,
  Card,
  IconButton,
  Tooltip,
} from 'react-magma-dom';
import { InfoIcon } from 'react-magma-icons';

export function Example() {
  const infoLabel = 'Scores are averaged across all attempts in the term.';

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.bar}
        dataSet={[
          { group: 'Chapter 1', value: 85 },
          { group: 'Chapter 2', value: 72 },
        ]}
        options={{
          title: 'Chapter Performance',
          axes: {
            left: { mapsTo: 'value' },
            bottom: { mapsTo: 'group', scaleType: 'labels' },
          },
          height: '400px',
        }}
        chartToolbar={{
          titlePrefix: <Badge>Main</Badge>,
          titleSuffix: (
            <Tooltip content={infoLabel}>
              <IconButton
                aria-label={infoLabel}
                icon={<InfoIcon />}
                size={ButtonSize.small}
                type={ButtonType.button}
                variant={ButtonVariant.link}
              />
            </Tooltip>
          ),
        }}
      />
    </Card>
  );
}

Custom content between the title and the chart

The additionalContent prop renders custom controls below the toolbar and above the chart. It requires chartToolbar and is ignored without it. In the example below the Select is wired to component state, so choosing a range re-renders the chart with the matching bars.

Always set options.height when using this prop. The toolbar switches from overlay to normal flow, so toolbar + content + chart stack together. Without a fixed chart height, when your content expands (dropdown opens, validation error shows), the container shrinks and Carbon redraws the chart, causing layout thrashing. A fixed height lets your content expand freely without affecting the chart.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card, Select } from 'react-magma-dom';

const barDataSet = [
  { group: 'Chapter 1', value: 85 },
  { group: 'Chapter 2', value: 72 },
  { group: 'Chapter 3', value: 91 },
  { group: 'Chapter 4', value: 64 },
];

const chapterFilters = [
  { label: 'All Chapters', value: 'all' },
  { label: 'Chapters 1-2', value: 'ch-1-2' },
  { label: 'Chapters 3-4', value: 'ch-3-4' },
];

const chaptersByFilter = {
  'ch-1-2': ['Chapter 1', 'Chapter 2'],
  'ch-3-4': ['Chapter 3', 'Chapter 4'],
};

export function Example() {
  const [filter, setFilter] = React.useState(chapterFilters[0]);
  const chapters = chaptersByFilter[filter.value];
  const dataSet = chapters
    ? barDataSet.filter(row => chapters.includes(row.group))
    : barDataSet;

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.bar}
        dataSet={dataSet}
        options={{
          title: 'Chapter Performance',
          axes: {
            left: { mapsTo: 'value' },
            bottom: { mapsTo: 'group', scaleType: 'labels' },
          },
          height: '400px',
        }}
        chartToolbar={{}}
        additionalContent={
          <Select
            items={chapterFilters}
            labelText="Filter by"
            selectedItem={filter}
            onSelectedItemChange={changes =>
              setFilter(changes.selectedItem || chapterFilters[0])
            }
          />
        }
      />
    </Card>
  );
}

Selective button visibility

Disable individual toolbar buttons by setting showAsTable or fullscreen to false.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart
        type={CarbonChartType.donut}
        dataSet={[
          { group: 'High performance', value: 50 },
          { group: 'Average performance', value: 30 },
          { group: 'Poor performance', value: 15 },
          { group: 'Not attempted', value: 5 },
        ]}
        options={{
          title: 'Table Only (No Fullscreen)',
          resizable: true,
          height: '400px',
          donut: {
            center: { label: 'Questions' },
          },
          legend: {
            truncation: { type: 'none' },
          },
        }}
        chartToolbar={{
          fullscreen: false,
        }}
      />
    </Card>
  );
}

Inverse theme

The toolbar respects the isInverse prop on CarbonChart, applying inverse styling to the toolbar buttons, the modal, and the data table.

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse style={{ padding: '12px' }}>
      <CarbonChart
        isInverse
        type={CarbonChartType.donut}
        dataSet={[
          { group: 'High performance', value: 50 },
          { group: 'Average performance', value: 30 },
          { group: 'Poor performance', value: 15 },
          { group: 'Not attempted', value: 5 },
        ]}
        options={{
          title: 'Inverse Theme Demo',
          resizable: true,
          height: '400px',
          donut: {
            center: { label: 'Questions' },
          },
          legend: {
            truncation: { type: 'none' },
          },
        }}
        chartToolbar={{}}
      />
    </Card>
  );
}

Design

Components

Data Visualization

Area (simple)

Area (stacked)

Bar (simple)

Bar (floating)

Bar (grouped)

Bar (stacked)

Boxplot

Bubble

Bullet

Combo

Donut

Gauge

Histogram

Line

Lollipop

Meter

Pie

Radar

Scatter

Sparkline

Step

Toolbar customization

Additional "More options" items

Custom table columns

Chart title heading level

Custom content around the title

Custom content between the title and the chart

Selective button visibility

Inverse theme