Get started

Charts help you tell accurate and convincing stories around data with beautiful and accessible visualizations.

Resources

Carbon Charts Core

Try Carbon Charts Vanilla components with CodeSandbox.

codesandbox icon
Download WIP charting design specifications (IBM internal link)

sketch icon
Data visualization color palettes (IBM internal link)

sketch icon

Get started with charts

Refer to the contribution guidelines before you start building. If you want to develop your own components, we recommend the Webpack Dev Server.

Visit the component status page for a complete list of available components.

Install packages

Using yarn:


$ yarn add @carbon/charts d3

If you prefer npm:


$ npm install --save @carbon/charts d3

If you’re consuming through a bundler (e.g. webpack):

index.html
...
<div id="my-bar-chart"></div>
...
index.js
import '@carbon/charts/style.css';
import { BarChart, defaultColors } from '@carbon/charts';
// grab chart holder DOM element
const chartHolder = document.getElementById('my-bar-chart');
// initialize the chart
new BarChart(chartHolder, {
  data: stackedBarData,
  options: stackedBarOptions,
});

If you’re consuming in a browser environment (e.g. through CDNs):

index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/@carbon/charts/style.css" />
  </head>
  <body>
    <div id="my-bar-chart"></div>
    <script src="https://unpkg.com/@carbon/charts/index.umd.js"></script>
    <script>
      // grab chart holder DOM element
      const chartHolder = document.getElementById('my-bar-chart');
      const stackedBarData = {
        // ...see next section
      };
      const stackedBarOptions = {
        // ...see next section
      };
      // initialize the chart
      new Charts.BarChart(chartHolder, {
        data: stackedBarData,
        options: stackedBarOptions,
      });
    </script>
  </body>
</html>

Start the server


cd packages/core
yarn run demo:server

Launch your browser and go to http://localhost:9001/.

Data and options

Data and options follow the same model in all charts, with minor exceptions and differences in specific components.

For example, you only need to provide one data set for pie and donut charts. In the case of donut charts, you can pass in an additional field called center in your options when configuring the donut center.

Additional options available vary by chart type. For more examples see the data demo.

Below are sample data and options that can be used in a stacked bar chart:

import { BarChart, defaultColors } from '@carbon/charts';
// Use the below if you're loading bundles through a CDN
// const { BarChart, defaultColors } = Charts;
const stackedBarData = {
  labels: ['Quantity', 'Leads', 'Sold', 'Restocking', 'Misc'],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColors: [defaultColors[0]],
      data: [65000, 29123, 35213, 51213, 16932],
    },
    {
      label: 'Dataset 2',
      backgroundColors: [defaultColors[1]],
      data: [32432, 21312, 56456, 21312, 34234],
    },
    {
      label: 'Dataset 3',
      backgroundColors: [defaultColors[2]],
      data: [12312, 23232, 34232, 12312, 34234],
    },
  ],
};
const stackedBarOptions = {
  scales: {
    x: {
      title: '2018 Annual Sales',
    },
    y: {
      title: 'Figures',
      formatter: axisValue => {
        return `${axisValue / 1000}k`;
      },
      stacked: true,
    },
  },
  legendClickable: true,
  containerResizable: true,
};

Troubleshooting

If you experience any issues while getting started with Carbon Charts, head over to the GitHub repo for more guidance and support. Please create a GitHub issue if you find a bug or need more help.

Edit this page on GitHub
Previous
Experimental: Order summary template
Next
Get started: React