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 |
| ❕ 3️⃣ 4️⃣ | funnel | Adds funnel chart type |
| 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 |
| ❕ ❕ 4️⃣ | timestack | Adds opinionated time scale formatting with "nice" time divisions |
| Support | Name | Description |
|---|---|---|
| 2️⃣ 3️⃣ 4️⃣ | annotation | Draws lines, boxes, points, labels, polygons and ellipses 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️⃣ ❕ ❕ | doughnutlabel | Display a text label in the center of a doughnut chart |
| 2️⃣ 3️⃣ 4️⃣ | hierarchical | Adds hierarchical scales that can be collapsed, expanded, and focused |
| ❕ ❕ 4️⃣ | image-label | Displays image labels on data for doughnut charts |
| 2️⃣ ❕ ❕ | piechart-outlabels | Displays labels outside a pie/doughnut chart |
| 2️⃣ ❕ ❕ | regression | Calculate and draw statistical regressions (trend lines) |
| ❕ ❕ 4️⃣ | trendline | Draw trend lines |
| 2️⃣ ❕ ❕ | waterfall | Enables easy use of waterfall charts |
| Support | Name | Description |
|---|---|---|
| ❕ ❕ 4️⃣ | a11y-legend | Provides keyboard accessibility for chart legends |
| ❕ 3️⃣ 4️⃣ | chart2music | Enhances chart accessibility with keyboard navigation and sonification |
| 2️⃣ 3️⃣ 4️⃣ | deferred | Defers initial chart update until chart scrolls into viewport |
| 2️⃣ 3️⃣ 4️⃣ | dragdata | Lets users drag data points on the chart |
| ❕ ❕ 4️⃣ | interaction-tools | Drag data points and draw freeform trails directly on charts. |
| ❕ 3️⃣ 4️⃣ | select-drag | Drag across charts to select an axis range |
| 2️⃣ 3️⃣ 4️⃣ | zoom | Enables zooming and panning on charts |
| Support | Name | Description |
|---|---|---|
| 2️⃣ 3️⃣ 4️⃣ | 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️⃣ | dayjs | dayjs adapter |
| 2️⃣ 3️⃣ 4️⃣ | luxon | Luxon adapter |
| 2️⃣ 3️⃣ 4️⃣ | moment | Moment.js adapter |
| ❕ 3️⃣ 4️⃣ | spacetime | Spacetime adapter |
| Support | Name | Description |
|---|---|---|
| 2️⃣ ❕ ❕ | ember-cli-chart | Ember CLI |
| ❕ ❕ 4️⃣ | fresh_charts | Fresh |
| 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️⃣ | solid-chartjs | SolidJs |
| ❕ 3️⃣ 4️⃣ | svelte-chartjs | Svelte |
| 2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
| Support | Name | Description |
|---|---|---|
| ❕ 3️⃣ ❕ | BlazorChartjs | Blazor |
| ❕ 3️⃣ 4️⃣ | pax.BlazorChartJs | Blazor (with JavaScript isolation) |
| 2️⃣ 3️⃣ 4️⃣ | charba | GWT/J2CL |
| 2️⃣ ❕ ❕ | chart.java | Java |
| ❕ ❕ 4️⃣ | chartjs-java-model | Java |
| 2️⃣ ❕ ❕ | chartjs-ocaml | OCaml |
| 2️⃣ 3️⃣ ❕ | chartjs-ror | Ruby, simplifies using Chart.js in Rails views |
| ❕ 3️⃣ 4️⃣ | chart-js-rs | Chart.js types API in Rust (WIP in Alpha/incomplete) |
| 2️⃣ ❕ ❕ | django-chartjs | Django |
| figma | Design components | |
| 2️⃣ 3️⃣ 4️⃣ | ipychart | Python |
| 2️⃣ 3️⃣ 4️⃣ | laravel-chartjs | Laravel |
| 2️⃣ ❕ ❕ | liquify | Fast, multi-threaded visualization of stream data with Angular |
| 2️⃣ ❕ ❕ | nova-chartjs | Laravel Nova |
| ❕ ❕ 4️⃣ | octave-chartjs | GNU Octave |
| ❕ ❕ 4️⃣ | RazorKit.ChartJs | HTML Helper for Asp.Net MVC |
| ❕ 3️⃣ 4️⃣ | symfony/ux-chartjs | Symfony UX bundle |
| 2️⃣ 3️⃣ 4️⃣ | quickchart | Web API for static charts |
| 2️⃣ ❕ ❕ | wicked-charts | Wrapper for Java web apps |
| Support | Name | Description |
|---|---|---|
| ❕ 3️⃣ ❕ | xhub | Browser extension for Chart.js (and more) on GitHub pages |
