Skip to main content

ChartJS

https://www.chartjs.org/

Simple yet flexible JavaScript charting for designers & developers

Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter. Created by London-based web developer Nick Downie in 2013, now it is maintained by the community and is the second most popular JS charting library on GitHub by the number of stars after D3.js, considered significantly easier to use though less customizable than the latter. Chart.js renders in HTML5 canvas and is widely covered as one of the best data visualization libraries. It is available under the MIT license.

Features

  • Offers variety of attractive graphs and chart formats.
  • Provides business users an interface to easily design, refine and collaborate on their dashboards.
  • Ability to track historical data.
  • Use for Data Visualization.
  • Real-Time Updating: Track metrics in real time with consistent and frequent updates.
  • Receive email reports and notifications regarding metric.
  • Facilitates the creation of widgets or other graphical user interface (GUI) elements.
  • Supports accessability through differing operating systems and mobile devices.
  • Redraws charts on window resize for perfect scale granularity

Prerequisites

  • Basic understanding of Html and CSS
  • Basic familiarity with JavaScript(OOP, Arrays)

Getting started for Chart.js

  1. Source Download

    • Goto the latest repository on GitHub here.
    • Download the link named ‘Source code (zip)’
    • Extract the contents of the folder somewhere safe.
    • Copy the Chart.min.js file from the dist/ folder to your project.
    • Finally, reference the Chart.js file in your HTML code in <script> tag.

  2. Content Delivery Network

    • Goto https://cdnjs.com/libraries/Chart.js
    • Copy the link source you want to use, for example, ‘https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/Chart.min.js‘.
    • Add this link within a script tag into your HTML code in <script> tag.

  3. Package Managers

    • Through NPM
      npm i chart.js --save
    • Through Yarn
      yarn add chart.js

Usage and Working with Chart.js(Beginners)

For working and using various charts that are defined in this javascript library refer to this blog: 👇

Chart.js tutorial

Integration with JS frameworks and Installations

  • React.js
    npm install --save react-chartjs-2 chart.js
  • Angular.js
    npm install angular-chart.js --save
  • Vue.js
    npm install vue-chartjs chart.js --save

Who uses Chart.js?

860 companies reportedly use Chart.js in their tech stacks, including:

  • GoDaddy
  • Deloitte
  • Cognizant
  • Goopy
  • FinTech Consortium
  • Flutterwave
  • NetApp, etc.

Alternatives to Chart.js

Highcharts : Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

D3.js : It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.

Plotly.js : It is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R). It can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

ApexCharts : A modern JavaScript charting library to build interactive charts and visualizations with simple API.

Google Charts : It is an interactive Web service that creates graphical charts from user-supplied information. The user supplies data and a formatting specification expressed in JavaScript embedded in a Web page; in response the service sends an image of the chart.

Contributing

If anyone interested in being a contributor and want to get involved in developing the Chart.js Library, may look over the contributing guidelines first. For support and queries, you can join Slack Channel and post questions in #dev channel and also post questions on Stack Overflow with the chartjs tag.

References