Get started

Resources

Download WIP charting design specifications (IBM internal link)

sketch icon

Development options

Carbon supports vanilla JS, React and Angular as core parts of the system. You can build components in another framework, but you won’t receive the same level of support.

Wrapping components with JavaScript frameworks

Many JavaScript frameworks have a mechanism to dynamically create and destroy DOM elements, like changing data in an array.

To wrap Carbon Charts components in a framework of your choice, you’ll need to initialize the chart through the vanilla library (@carbon/charts) and update data and options upon receiving updated values through the framework you are using.

Also, when DOM elements that Carbon Charts components have been instantiated on are being destroyed, the component instances should be released so there are no zombie event handlers.

The easiest way to hook on the creation and destruction of DOM elements is to define a “wrapping component” with the JavaScript framework of your choice.

Examples

You can check out the BarChart component in three different frameworks:

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.

Other frameworks

We will accept contributions of additional frameworks in the future.

For Carbon to incorporate additional frameworks, the work need clear, guaranteed, and ongoing resources for maintenance and support. If a team builds a product using a new implemenation of Carbon Charts but has no plan to support the solution outside of the product, it will not become part of the Carbon Design System.