<div align="center"> <img width="320" src="https://www.chartjs.org/media/awesome.svg" alt="Awesome Chart.js"> </div>

Awesome Chart.js

A curated list of awesome things related to Chart.js

• Resources
• Charts
• Plugins
• Adapters
• Integrations
• Tools

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 ❕ ❕ 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

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 ❕ ❕ 4️⃣ | temporal | Javascript Temporal API

Integrations

JavaScript

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

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 ❕ ❕ 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

Tools

Support | Name | Description -- | -- | -- ❕ 3️⃣ ❕ | xhub | Browser extension fo