Get started
Resources
Carbon Charts React library
The library provides front-end developers & engineers 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
Using yarnIf you prefer npm$ yarn add @carbon/charts @carbon/charts-react d3
$ npm install --save @carbon/charts @carbon/charts-react d3
Getting started
To start using the StackedBarChart component, try the example below:
import React from "react";import { StackedBarChart } from "@carbon/charts-react";import "@carbon/charts/styles.css";// Or// import '@carbon/charts/styles/styles.scss';const stackedBarOptions = {// ...see next section
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
Development
Please refer to the Contribution Guidelines before starting any work.
Using the server
We recommend the use of React Storybook for developing components.
cd packages/reactyarn run storybook
Open browser to http://localhost:9005/.
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.