Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chartjs/awesome

A curated list of awesome Chart.js resources and libraries
https://github.com/chartjs/awesome

List: awesome

awesome chartjs charts integrations plugins resources

Last synced: about 17 hours ago
JSON representation

A curated list of awesome Chart.js resources and libraries

Host: GitHub
URL: https://github.com/chartjs/awesome
Owner: chartjs
License: mit
Created: 2019-02-26T17:42:58.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2024-05-20T08:52:26.000Z (8 months ago)
Last Synced: 2024-05-23T02:02:26.611Z (8 months ago)
Topics: awesome, chartjs, charts, integrations, plugins, resources
Homepage:
Size: 67.4 KB
Stars: 1,964
Watchers: 40
Forks: 128
Open Issues: 5
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-starred - chartjs/awesome - A curated list of awesome Chart.js resources and libraries (awesome)
ultimate-awesome - awesome - A curated list of awesome Chart.js resources and libraries. (Other Lists / Monkey C Lists)

README

        


    



# Awesome Chart.js [![Awesome](https://awesome.re/badge-flat2.svg)](https://awesome.re)

A curated list of awesome things related to [Chart.js](https://www.chartjs.org)

- [Resources](#resources)

- [Charts](#charts)

- [Plugins](#plugins)

- [Adapters](#adapters)

- [Integrations](#integrations)

- [Tools](#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](https://chartjs.org/docs) | The user guide and documentation site.

## Charts

  Support | Name | Description

  -- | -- | --

  2️⃣ ❕ ❕ | [bar-funnel](https://github.com/chartjs/Chart.BarFunnel.js) | Adds bar funnel chart type

  2️⃣ 3️⃣ 4️⃣ | [boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) | Adds boxplot and violin plot chart type

  2️⃣ 3️⃣ 4️⃣ | [error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) | Adds diverse error bar variants of standard chart types

  2️⃣ 3️⃣ ❕ | [financial](https://github.com/chartjs/chartjs-chart-financial) | Adds financial chart types such as a candlestick

  ❕ 3️⃣ 4️⃣ | [funnel](https://github.com/sgratzl/chartjs-chart-funnel) | Adds funnel chart type

  2️⃣ 3️⃣ 4️⃣ | [geo](https://github.com/sgratzl/chartjs-chart-geo) | Adds geographic map chart types such as choropleth and bubble map

  2️⃣ 3️⃣ 4️⃣ | [graph](https://github.com/sgratzl/chartjs-chart-graph) | Adds graph chart types such as a force directed graph

  2️⃣ 3️⃣ 4️⃣ | [matrix](https://github.com/kurkle/chartjs-chart-matrix) | Adds matrix chart type

  2️⃣ 3️⃣ 4️⃣ | [pcp](https://github.com/sgratzl/chartjs-chart-pcp) | Adds parallel coordinates plot chart type

  ❕ 3️⃣ 4️⃣ | [sankey](https://github.com/kurkle/chartjs-chart-sankey) | Adds sankey diagram chart type

  2️⃣ ❕ ❕ | [smith](https://github.com/chartjs/Chart.smith.js) | Adds smith chart type

  2️⃣ 3️⃣ 4️⃣ | [stacked100](https://github.com/y-takey/chartjs-plugin-stacked100) | Draws 100% stacked bar chart

  2️⃣ 3️⃣ 4️⃣ | [treemap](https://github.com/kurkle/chartjs-chart-treemap) | Adds treemap chart type

  ❕ 3️⃣ 4️⃣ | [venn](https://github.com/upsetjs/chartjs-chart-venn) | Adds venn and euler chart type

  ❕ 3️⃣ 4️⃣ | [word-cloud](https://github.com/sgratzl/chartjs-chart-wordcloud) | Adds word-cloud chart type

## Plugins

### Styling

  Support | Name | Description

  -- | -- | --

  ❕ 3️⃣ 4️⃣ | [autocolors](https://github.com/kurkle/chartjs-plugin-autocolors) | Automatic color generation

  2️⃣ ❕ ❕ | [colorschemes](https://github.com/nagix/chartjs-plugin-colorschemes) | Enables automatic coloring using predefined color schemes

  ❕ 3️⃣ 4️⃣ | [gradient](https://github.com/kurkle/chartjs-plugin-gradient) | Easy gradients

  2️⃣ ❕ ❕ | [rough](https://github.com/nagix/chartjs-plugin-rough) | Draws charts in a sketchy, hand-drawn-like style using Rough.js

  2️⃣ ❕ ❕ | [style](https://github.com/nagix/chartjs-plugin-style) | Provides styling options such as shadow, bevel, glow or overlay effects

  ❕ ❕ 4️⃣ | [timestack](https://github.com/jkmnt/chartjs-scale-timestack) | Adds opinionated time scale formatting with "nice" time divisions

  

### Features

  Support | Name | Description

  -- | -- | --

  2️⃣ 3️⃣ 4️⃣ | [annotation](https://github.com/chartjs/chartjs-plugin-annotation) | Draws lines, boxes, points, labels, polygons and ellipses on the chart area

  2️⃣ 3️⃣ ❕ | [crosshair](https://github.com/abelheinsbroek/chartjs-plugin-crosshair) | Adds a data crosshair to line and scatter charts

  2️⃣ 3️⃣ 4️⃣ | [datalabels](https://github.com/chartjs/chartjs-plugin-datalabels) | Displays labels on data for any type of charts

  2️⃣ ❕ ❕ | [doughnutlabel](https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel) | Display a text label in the center of a doughnut chart

  2️⃣ 3️⃣ 4️⃣ | [hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) | Adds hierarchical scales that can be collapsed, expanded, and focused

  ❕ ❕ 4️⃣ | [image-label](https://github.com/yunusemrejs/chartjs-image-label) | Displays image labels on data for doughnut charts

  2️⃣ ❕ ❕ | [piechart-outlabels](https://github.com/mykola-digtiar/chartjs-plugin-piechart-outlabels) | Displays labels outside a pie/doughnut chart

  2️⃣ ❕ ❕ | [regression](https://github.com/pomgui/chartjs-plugin-regression) | Calculate and draw statistical regressions (trend lines)

  ❕ ❕ 4️⃣ | [trendline](https://github.com/Makanz/chartjs-plugin-trendline) | Draw trend lines

  2️⃣ ❕ ❕ | [waterfall](https://github.com/everestate/chartjs-plugin-waterfall) | Enables easy use of waterfall charts

### Interactions

  Support | Name | Description

  -- | -- | --

  ❕ ❕ 4️⃣ | [a11y-legend](https://github.com/julianna-langston/chartjs-plugin-a11y-legend) | Provides keyboard accessibility for chart legends 

  ❕ 3️⃣ 4️⃣ | [chart2music](https://github.com/julianna-langston/chartjs2music) | Enhances chart accessibility with keyboard navigation and sonification 

  2️⃣ 3️⃣ 4️⃣ | [deferred](https://github.com/chartjs/chartjs-plugin-deferred) | Defers initial chart update until chart scrolls into viewport

  2️⃣ 3️⃣ 4️⃣ | [dragdata](https://github.com/artus9033/chartjs-plugin-dragdata) | Lets users drag data points on the chart

  2️⃣ 3️⃣ 4️⃣ | [zoom](https://github.com/chartjs/chartjs-plugin-zoom) | Enables zooming and panning on charts

### Data Sources

  Support | Name | Description

  -- | -- | --

  2️⃣ 3️⃣ 4️⃣ | [datasource-prometheus](https://github.com/samber/chartjs-plugin-datasource-prometheus) | Displays time-series from Prometheus

  2️⃣ 3️⃣ ❕ | [streaming](https://github.com/nagix/chartjs-plugin-streaming) | Adds support for live streaming data

In addition, many plugins can be found on the [npm registry](https://www.npmjs.com/search?q=chartjs-plugin-).

## Adapters

  Support | Name | Description

  -- | -- | --

  2️⃣ 3️⃣ 4️⃣ | [date-fns](https://github.com/chartjs/chartjs-adapter-date-fns) | date-fns adapter

  2️⃣ 3️⃣ 4️⃣ | [dayjs](https://github.com/bolstycjw/chartjs-adapter-dayjs-4) | dayjs adapter

  2️⃣ 3️⃣ 4️⃣ | [luxon](https://github.com/chartjs/chartjs-adapter-luxon) | Luxon adapter

  2️⃣ 3️⃣ 4️⃣ | [moment](https://github.com/chartjs/chartjs-adapter-moment) | Moment.js adapter

  ❕ 3️⃣ 4️⃣ | [spacetime](https://github.com/nfinished/chartjs-adapter-spacetime) | Spacetime adapter

## Integrations

### JavaScript

  Support | Name | Description

  -- | -- | --

  2️⃣ ❕ ❕ | [ember-cli-chart](https://github.com/aomran/ember-cli-chart) | Ember CLI

  ❕ ❕ 4️⃣ | [fresh_charts](https://github.com/denoland/fresh_charts) | Fresh

  2️⃣ ❕ ❕ | [lwcc](https://github.com/SalesforceLabs/LightningWebChartJS) | Lightning Web Component

  2️⃣ 3️⃣ 4️⃣ | [ng2-charts](https://github.com/valor-software/ng2-charts) | Angular v2+

  2️⃣ 3️⃣ ❕ | [omi-chart](https://github.com/Tencent/omi/tree/master/components/chart) | Omi

  2️⃣ 3️⃣ 4️⃣ | [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) | React

  ❕ 3️⃣ 4️⃣ | [solid-chartjs](https://github.com/s0ftik3/solid-chartjs) | SolidJs

  ❕ 3️⃣ 4️⃣ | [svelte-chartjs](https://github.com/SauravKanchan/svelte-chartjs) | Svelte

  2️⃣ 3️⃣ 4️⃣ | [vue-chartjs](https://github.com/apertureless/vue-chartjs/) | Vue.js

### Others

  Support | Name | Description

  -- | -- | --

  ❕ 3️⃣ ❕ | [BlazorChartjs](https://github.com/erossini/BlazorChartjs) | Blazor

  ❕ 3️⃣ 4️⃣ | [pax.BlazorChartJs](https://github.com/ipax77/pax.BlazorChartJs) | Blazor (with [JavaScript isolation](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#javascript-isolation-in-javascript-modules-1))

  2️⃣ 3️⃣ 4️⃣ | [charba](https://github.com/pepstock-org/Charba) | GWT/J2CL

  2️⃣ ❕ ❕ | [chart.java](https://github.com/mdewilde/chart/) | Java

  ❕ ❕ 4️⃣ | [chartjs-java-model](https://github.com/xdev-software/chartjs-java-model) | Java

  2️⃣ ❕ ❕ | [chartjs-ocaml](https://github.com/monstasat/chartjs-ocaml) | OCaml

  2️⃣ 3️⃣ ❕ | [chartjs-ror](https://github.com/airblade/chartjs-ror) | Ruby, simplifies using Chart.js in Rails views

  ❕ 3️⃣ 4️⃣ | [chart-js-rs](https://github.com/Billy-Sheppard/chart-js-rs) | Chart.js types API in Rust (WIP in Alpha/incomplete)

  2️⃣ ❕ ❕ | [django-chartjs](https://github.com/peopledoc/django-chartjs) | Django

    | [figma](https://www.figma.com/community/file/1111335120507995139) | Design components

  2️⃣ 3️⃣ 4️⃣ | [ipychart](https://github.com/nicohlr/ipychart) | Python

  2️⃣ 3️⃣ 4️⃣ | [laravel-chartjs](https://github.com/icehouse-ventures/laravel-chartjs) | Laravel

  2️⃣ ❕ ❕ | [liquify](https://github.com/sakos95/liquify) | Fast, multi-threaded visualization of stream data with Angular

  2️⃣ ❕ ❕ | [nova-chartjs](https://github.com/coroo/nova-chartjs) | Laravel Nova

  4️⃣ ❕ ❕ | [RazorKit.ChartJs](https://ekondur.github.io/RazorKit/chartjs) | HTML Helper for Asp.Net MVC

  ❕ 3️⃣ 4️⃣ | [symfony/ux-chartjs](https://github.com/symfony/ux-chartjs) | Symfony UX bundle

  2️⃣ 3️⃣ 4️⃣ | [quickchart](https://github.com/typpo/quickchart) | Web API for static charts

  2️⃣ ❕ ❕ | [wicked-charts](https://github.com/adessoAG/wicked-charts) | Wrapper for Java web apps

## Tools

  Support | Name | Description

  -- | -- | --

  ❕ 3️⃣ ❕ | [xhub](https://github.com/nschloe/xhub) | Browser extension for Chart.js (and more) on GitHub pages