Carbon Charts 1.x now compatible with Carbon v11
No major UI changes, most breaking changes involve theming & styles
We have some exciting news for you!
As you might know, Carbon v11 was released on March 31st. This release contains a number of quality-of-life updates that introduce amazing new technologies. 🔥
However, in Carbon v11 you won’t notice major changes in terms of the design language, and similarly in Carbon Charts 1.x you won’t notice major visual changes.
Since the release of Carbon v11, we’ve spent two months updating the Carbon Charts library to be compatible with these additions and changes:
The majority of these updates relate to internal styling dependencies to Carbon, Sass tools and compilations, and many won’t affect our end-users (developers).
Our goals moving forward
- Ongoing compliance with the Carbon Design System data visualization guidelines.
- Enhanced documentation and sample code.
- Reasonable support of our existing v0.x users!
Note: Starting August 2022, we will reduce support of v0.x to major bug-fixes, and security & accessibility updates.
With the release of Carbon v11 at the end of March, this should give our users four months to get ready for the migration.
Migration instructions from version 0.x
1. Dart Sass
Sass files in Carbon now require Dart Sass in order to compile.
Similarly with Carbon Charts (which uses Sass modules from Carbon) we’ve moved on from the previously used node-sass library to sass & our Sass files will now require Dart Sass in order to compile.
Learn more about this move and why it happened.
2. Styles
We now depend on the @carbon/styles package.
When using components from Carbon Charts, you now need to import general Carbon styles from the @carbon/styles package.
Note: If you’re using Carbon (v11) styles in your application already, then you most likely do not need to go through this step (e.g. if you’re using
@carbon/reactdirectly).
These styles are used in components such as the charting toolbar, the tabular representation modal, etc.
You can access the @carbon/styles CSS bundle through an import to @carbon/styles/css/styles.css
3. Theming
We are no longer shipping multiple themed-style bundles.
These three style files are no longer deployed:
@carbon/charts/styles-g10.css@carbon/charts/styles-g90.css@carbon/charts/styles-g100.css
They are replaced with this singular style file:
@carbon/charts/styles.css
This is based on a major breaking change in Carbon itself, where the focus of theming has been shifted towards a CSS-custom-properties-based approach.
Themes now rely on CSS variables that live inside the browser, and this enables applications to add multiple themes with a much smaller file size and better performance!
With Carbon v11 support of inline theming, this feature was also brought into Carbon Charts. This unlocks the flexibility of charts on the same page to use different themes, with a different set of tokens and colors!
Learn more about theming capabilities in Carbon Charts in our API documentation. 🙂
In conclusion, I’d like to thank all of the team members that made this effort a reality…
This includes our fantastic design and development teams. And most importantly, our awesome community of contributors and users! 🙌 👏
Eliad Moosavi is a Software Developer based out of Toronto, Canada working on the Carbon Design System. The above article is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
Questions or comments about Carbon? Reach out at carbon@us.ibm.com or tweet us @_carbondesign.
