Awesome Chart.js 
A curated list of awesome things related to Chart.js
Chart.js support. There are three major Chart.js versions currently in use. Please refer to version badges below to check if a library supports your version of Chart.js. (Also, "
- Chart.js v.
4️⃣ — released in November 2022 - Chart.js v.
3️⃣ — released in April 2021 - Chart.js v.
2️⃣ — released in April 2016
Resources
- Official Guide | The user guide and documentation site.
Charts
| Support | Name | Description |
|---|---|---|
| bar-funnel | Adds bar funnel chart type | |
| boxplot | Adds boxplot and violin plot chart type | |
| error-bars | Adds diverse error bar variants of standard chart types | |
| financial | Adds financial chart types such as a candlestick | |
| funnel | Adds funnel chart type | |
| geo | Adds geographic map chart types such as choropleth and bubble map | |
| graph | Adds graph chart types such as a force directed graph | |
| matrix | Adds matrix chart type | |
| pcp | Adds parallel coordinates plot chart type | |
| sankey | Adds sankey diagram chart type | |
| smith | Adds smith chart type | |
| stacked100 | Draws 100% stacked bar chart | |
| treemap | Adds treemap chart type | |
| venn | Adds venn and euler chart type | |
| word-cloud | Adds word-cloud chart type |
Plugins
Styling
| Support | Name | Description |
|---|---|---|
| autocolors | Automatic color generation | |
| colorschemes | Enables automatic coloring using predefined color schemes | |
| gradient | Easy gradients | |
| rough | Draws charts in a sketchy, hand-drawn-like style using Rough.js | |
| style | Provides styling options such as shadow, bevel, glow or overlay effects |
Features
| Support | Name | Description |
|---|---|---|
| annotation | Draws lines, boxes, points, labels, polygons and ellipses on the chart area | |
| crosshair | Adds a data crosshair to line and scatter charts | |
| datalabels | Displays labels on data for any type of charts | |
| hierarchical | Adds hierarchical scales that can be collapsed, expanded, and focused | |
| regression | Calculate and draw statistical regressions (trend lines) | |
| waterfall | Enables easy use of waterfall charts |
Interactions
| Support | Name | Description |
|---|---|---|
| deferred | Defers initial chart update until chart scrolls into viewport | |
| dragdata | Lets users drag data points on the chart | |
| zoom | Enables zooming and panning on charts |
Data Sources
| Support | Name | Description |
|---|---|---|
| datasource-prometheus | Displays time-series from Prometheus | |
| streaming | Adds support for live streaming data |
In addition, many plugins can be found on the npm registry.
Adapters
| Support | Name | Description |
|---|---|---|
| date-fns | date-fns adapter | |
| luxon | Luxon adapter | |
| moment | Moment.js adapter | |
| spacetime | Spacetime adapter |
Integrations
JavaScript
| Support | Name | Description |
|---|---|---|
| ember-cli-chart | Ember CLI | |
| lwcc | Lightning Web Component | |
| ng2-charts | Angular v2+ | |
| omi-chart | Omi | |
| react-chartjs-2 | React | |
| svelte-chartjs | Svelte | |
| vue-chartjs | Vue.js |
Others
| Support | Name | Description |
|---|---|---|
| BlazorChartjs | Blazor | |
| pax.BlazorChartJs | Blazor (with JavaScript isolation) | |
| charba | GWT/J2CL | |
| chart.java | Java | |
| chartjs-ocaml | OCaml | |
| chart-js-rs | Chart.js types API in Rust (WIP in Alpha/incomplete) | |
| django-chartjs | Django | |
| figma | Design components | |
| ipychart | Jupyter Notebook | |
| liquify | Fast, multi-threaded visualization of stream data with Angular | |
| nova-chartjs | Laravel Nova | |
| quickchart | Web API for static charts | |
| wicked-charts |
Tools
| Support | Name | Description |
|---|---|---|
| xhub | Browser extension for Chart.js (and more) on GitHub pages |
