Get started

Resources

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

Development options

The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you’re using a different framework.

Wrapping components with JavaScript frameworks

Many JavaScript frameworks have a mechanism to dynamically create/destroy DOM elements, for example, upon change in an array.

In order to develop wrappers of the Carbon Charts components in a framework of your choice, you’d need to initialize the chart through the vanilla library (@carbon/charts), and update data/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 that e.g. there are no zombie event handlers.

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

Examples

Below are links to various wrappers to our BarChart component:

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.

Other frameworks

We are open to the idea of providing core support for additional frameworks in future.

For the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a native web components implemenation of Carbon Charts, for example, but had no plan to support that solution outside of their product, that couldn’t become a core part of the Carbon Design System.