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 for Chart.js (and more) on GitHub pages