Carbon Charts

📊 📈⠀Robust dataviz framework implemented using D3 & typescript

#d3 #charts #typescript #d3js #ibm #carbon-design-system #dataviz #angular #vue #react

Demo Download

Carbon Charts

A reusable framework-agnostic D3 charting library.

Packages

Demos

Visit the demo website

Design specifications

Carbon data visualization design specifications can be found here.

CHANGELOG

Read the release change logs here

Component status

:white_check_mark: Stable :hourglass_flowing_sand: In progress

Component	Vanilla	Angular	React	Vue	Svelte
Simple Bar	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Grouped Bar	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Stacked Bar	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Floating Bar	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Donut	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Line	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Curved Line	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Pie	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Step	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Scatter	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Radar	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Area	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Gauge	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Meter	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Sparkline	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Treemap	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Combo	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Wordcloud	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Bullet	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Circle Pack	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Network diagrams	—	:white_check_mark:	:white_check_mark:	—	—
Proportional meter	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Histogram	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Tree	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Alluvial	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Heatmap	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Choropleth	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:

Bugs and feature requests

Have a bug or a feature request? First read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

Contributing

See our contributing guidelines. Included are instructions for opening issues, coding guidelines, and submitting pull requests.

Versioning

We use the semantic-release library to automatically version our releases within the guidelines of Semantic Versioning Semantic Versioning guidelines.

See our release change logs for the changelog of each version of Charts.

Core team

_{Eliad Moosavi} 💻 📖 💡 🚇 🔬	_{Jean A Servaas} 🎨 📖 💡	_{Mike Abbink} 🎨 📖 📆 🔬	_{Akshat Patel} 💻 📖 💡
_{Dean Williams} 📆	_{Nina Li} 📆	_{DianaStanciulescu} 🎨 📖 💡 🔬	_DanaPaslaru 🎨 📖 💡 🔬

Previous core members

_{natashadecoste} 💻 📖 💡	_{Zvonimir Fras} 💻 📖 👀	_{Callum Smith} 💻 📖 👀	_{Diana Tran} 🎨 📖 💡	_nicoleroppel 🎨 📖 💡
_Shixie 🎨 📖 💡	_{cameroncalder} 🎨 📖 💡	_{Fei Z} 💻 📖 💡 👀	_Tyler 🎨 📖 💡	_{Donisius Wigie} 💻 📖 💡

Contributors ✨

_{Nate Stuyvesant} 💻 📖 💡	_{Eric Yang} 💻 📖 💡 👀	_{Jennifer Chao} 💻 📖 💡 👀	_{Eric Liu} 💻 📖 💡 👀	_j1mie 💻 📖 💡 👀
_shaziajk 💻 📖 💡	_MichC 🎨 📖	_{Pablo Lopez Domowicz} 🎨 📖	_{Jaime Stockton} 🎨 📖	_{Thomas Mullen} 💻
_{Scott Dickerson} 💻 📖 💡	_{Simon Moore} 💻 📖 💡 👀	_Mariia 💻 📖 💡 👀	_rmathur16 🔬	_{TJ Egan} 💻
_{John Peng} 💻

Code of Conduct

Read our code of conduct here

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing