Awesome
<div align="center"> <img width="320" src="https://www.chartjs.org/media/awesome.svg" alt="Awesome Chart.js"> </div>Awesome Chart.js ![Awesome](https://awesome.re/badge-flat2.svg)
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
Resources
- Official Guide | The user guide and documentation site.
Charts
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 |
Plugins
Styling
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 |
Features
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 |
Interactions
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 |
2️⃣ 3️⃣ 4️⃣ | zoom | Enables zooming and panning on charts |
Data Sources
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.
Adapters
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 |
Integrations
JavaScript
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️⃣ | solid-chartjs | SolidJs |
❕ 3️⃣ 4️⃣ | svelte-chartjs | Svelte |
2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
Others
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 |
2️⃣ 3️⃣ 4️⃣ | quickchart | Web API for static charts |
2️⃣ ❕ ❕ | wicked-charts | Wrapper for Java web apps |
❕ 3️⃣ ❕ | symfony/ux-chartjs | Symfony UX bundle |
Tools
Support | Name | Description |
---|---|---|
❕ 3️⃣ ❕ | xhub | Browser extension for Chart.js (and more) on GitHub pages |