Get started – Carbon Design System

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

Note: Please direct all questions regarding support, bug fixes, and feature requests to the Carbon Charts core team.

Carbon Charts Vanilla library
Install
Getting started
Development
Troubleshooting

Resources

Carbon Charts Core

Try Carbon Charts Vanilla components with CodeSandbox.

Download WIP charting design specifications (Coming soon)

Data visualization color palettes (IBM internal link)

Carbon Charts Vanilla library

The library provides a collection of reusable charting components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

Install

If using yarn:

$ yarn add @carbon/charts d3

If you prefer npm:

$ npm install --save @carbon/charts d3

Getting started

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

index.html
...
<div id="my-bar-chart"></div>
...

index.js
import "@carbon/charts/styles.css";
import { StackedBarChart } from "@carbon/charts";
// grab chart holder DOM element
const chartHolder = document.getElementById("my-bar-chart");
// initialize the chart
new StackedBarChart(chartHolder, {
  data: stackedBarData,

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

index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/@carbon/charts/styles.css" />
  </head>
  <body>
    <div id="my-bar-chart"></div>
    <script src="https://unpkg.com/@carbon/charts/bundle.js"></script>

Data and options

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

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

There are also additional options available depending on the chart type being used, for more examples please see here.

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

const stackedBarData = {
  labels: ["Quantity", "Leads", "Sold", "Restocking", "Misc"],
  datasets: [
    {
      label: "Dataset 1",
      data: [65000, 29123, 35213, 51213, 16932],
    },
    {
      label: "Dataset 2",

Demos and Examples

Demos - Webpage
Demos - Data & options used

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of Webpack Dev Server for developing components.

Start the server

cd packages/core
yarn run demo:server

Open browser to http://localhost:9001/.

List of available components

View available components here.

Troubleshooting

If you experience any issues while getting set up with Carbon Charts, please head over to the GitHub repo for more guidelines and support. Please create an issue if your issue does not already exist.

Edit this page on GitHub

Patterns: Search

Get started: React