/awesome

A curated list of awesome Chart.js resources and libraries

MIT LicenseMIT

Awesome Chart.js

Awesome Chart.js Awesome

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

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

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️⃣ 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

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️⃣ ❕ 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
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️⃣ 3️⃣ 4️⃣ ipychart Python
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

Tools

Support Name Description
❕ 3️⃣ ❕ xhub Browser extension for Chart.js (and more) on GitHub pages