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