Carbon Charts

Carbon Charts is a component library providing 26 different chart types. It is designed to work across multiple environments, offering dedicated packages for:

• Vanilla JavaScript (@carbon/charts)
• Svelte (@carbon/charts-svelte)
• React (@carbon/charts-react)
• Vue.js (@carbon/charts-vue)
• Angular (@carbon/charts-angular)

The @carbon/charts-react package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package, you agree to telemetry collection.

To opt out of data collection, follow the instructions in the IBM Telemetry documentation.

To use Carbon Charts in a Vue.js 3+ project, install the @carbon/charts-vue package using npm or yarn.

Note for Vue 2.x users: If you are using Vue 2, you must use @carbon/charts-vue@latest instead of the standard Vue 3 package.

npm install -S @carbon/charts-vue

For the charts to render correctly, you must import the required CSS styles from the package distribution folder.

import '@carbon/charts-react/dist/styles.css';

To install the latest version of Carbon Charts for Angular, use npm or yarn. Note that the current documentation refers to the @next distribution tag for the latest features.

If you are using an older version of Angular, you should use specific distribution tags instead of the default, such as:

• @carbon/charts-angular@angular12
• @carbon/charts-angular@angular16
• @carbon/charts-angular@angular17

npm install -S @carbon/charts-angular@next

# Or using Yarn
yarn add @carbon/charts-angular@next

The official Carbon Charts documentation website includes interactive StackBlitz examples for every chart type across all supported frameworks. You can explore these examples and find implementation details at the official site.

https://charts.carbondesignsystem.com/

Because @carbon/charts expects a window object, you should dynamically import the chart components within Svelte's onMount function to prevent errors during Server-Side Rendering (SSR).

<script>
	import '@carbon/charts-svelte/styles.css'
	import { onMount } from 'svelte'

	let Chart = $state()

	onMount(async () => {
		const charts = await import('@carbon/charts-svelte')
		Chart = charts.BarChartSimple
	})
</script>

<Chart
	data={[
		{ group: 'Qty', value: 65000 },
		{ group: 'More', value: 29123 },
		{ group: 'Sold', value: 35213 },
		{ group: 'Restocking', value: 51213 },
		{ group: 'Misc', value: 16932 }
	]}
	options={{
		theme: 'white',
		title: 'Simple bar (discrete)',
		height: '400px',
		axes: {
			left: { mapsTo: 'value' },
			bottom: { mapsTo: 'group', scaleType: 'labels' }
		}
	}} />

After installing the package, you must import the required CSS styles to ensure the charts render correctly. Import the styles from the following path:

@carbon/charts/dist/styles.css

import '@carbon/charts/dist/styles.css';

To create a production-ready version of the documentation website, run the build command. The resulting static files will be located in the build folder.

yarn build

To use Carbon Charts in your vanilla JavaScript project, install the @carbon/charts package using your preferred package manager.

npm install -S @carbon/charts

Or with Yarn:

yarn add @carbon/charts

To run the Carbon Charts documentation website in a development environment, install the dependencies and start the development server. You can use the --open flag to automatically open the application in your default web browser.

yarn install
yarn dev

# or start the server and open the app in a new browser tab
yarn dev -- --open

To use Carbon Charts in a React application, install the @carbon/charts-react package using npm or yarn.

npm install -S @carbon/charts-react

Or using Yarn:

yarn add @carbon/charts-react