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

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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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',
        },
      },
      color: {
        scale: 10,
      },
      curve: 'curveMonotoneX',
      height: '400px',
    },
  };

  return (
    <Card style={{ padding: '12px' }}>
      <CarbonChart {...args} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </Card>
  );
}

Combo

import React from 'react';

import { CarbonChart, CarbonChartType } from '@react-magma/charts';
import { Card } from 'react-magma-dom';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </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';
// IMPORTANT: Uncomment the line below for the correct styles
// import '@react-magma/charts/dist/charts.css';

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} />
    </Card>
  );
}

On this page

Design

Components

Patterns

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