An introduction to Chart.js in 2020

  • by VIPER, January 6, 2020

If the site is data-intensive, then we need to find a way to make that data easy to visualize. Understanding long lists of raw numbers are difficult for humans. That’s where charts and graphs are introduced – complicated statistical relationships are made intuitive and obvious, as well as more accessible to non-English speakers. Everyone understands charts and graphs at the same pace, the same pace to understand paragraphs rife with technical jargon is difficult. Using charts when it is needed, will make your website visually more attractive and easier to understand.

What is Chart.js?

Chart.js is a Javascript library in which you can use the HTML5 canvas element to draw different types of charts. Since it uses canvas, to support older browsers you have to include a polyfill.

There are no dependencies in the library because of that its weight is very low as it’s ~11kb in size when concatenated, minified and gzipped. However, by including only the modules you need then you’re able to reduce the size even further. For example, if you only need to draw a pie chart in your website, you can include the core and the pie module and save bandwidth for your users.

Another best and important feature of Chart.js is that the charts are responsive, so they will adjust based on the available space. Finally, it provides extensive and clear documentation on the web that makes using its basic features as well as its advanced options very easy.

How to install Chart.js?

Chart.js can be installed via npm or bower. The recommended way to get Chart.js is shown below:-

npm

npm install Chart.js –save

Bower

bower install chart.js –save

CDN
CDNJS

Chart.js built files are available on CDNJS: https://cdnjs.com/libraries/Chart.js

jsDelivr

Chart.js built files are also available on jsDelivr: https://www.jsdelivr.com/package/npm/chart.js?path=dist

Github

You can download the latest version of Chart.js on Github.

If you download or clone the repository, you must build Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repository is strongly advised.

Selecting the correct build

There are two different builds for you to choose:

  • Stand-Alone Build
  • Bundled Build

Stand-Alone Build

Files :
– dist/Charts.js
– dist/Chart.min.js

The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.

Bundled Build

Files :
– dist/Chart.bundle.js
– dist/Chart.bundle.min.js

The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it’s better to use Chart.js (not bundled) and import Moment.js manually.

Why use Chart.js?

Chart.js is chosen because it can be learned and leveraged quickly. Chart.js is extremely customizable but it’s designed with simplicity in mind. In chart.js, charting libraries fall onto a complexity, where complex libraries extend deeper customization but have sharper learning curves. Your options will not be limited because Chart.js is one of the quickest and easiest libraries to learn. There are eight types of charts that will cover almost all of your data visualization needs.

Chart.js version 2 has a completely different API than earlier versions. Most earlier version options have current equivalents or are the same.

Browsers which are supported by Chart.js are :

  • Chrome 50+
  • Firefox 45+
  • Internet Explorer 11
  • Edge 14+
  • Safari 9+

A simple example to visualize chart.js

In this example, we create a bar chart for a single dataset and display that on our page. The method to use Chart.js is in the Usage documentation.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
Bar Chart
Barchart using Chart.js

Nine best alternatives to Chart.js

  • D3.js:- D3.js is a javascript library designed to simply more complex data visualization, analysis, and manipulation processes and provide data programmers, scientists with easier tools to complete their objects.
  • AnyChart:- AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, and the library works easily with any development stack.
  • ChartURL:- Add rich, data-driven charts to web & mobile apps, Slack bots, and emails. Send us data, and we return an image that renders perfectly on all platforms.
  • Highcharts:- Interactive JavaScript charts for your web pages.
  • amCharts:- JavaScripts / HTML 5 charts and maps data-viz libraries for web sites and applications, Fast and responsive, WordPress plugin available, Developed since 2006.
  • ZingChart:- JavaScripts Charts in one powerful declarative library. Simple for developers.
  • Webix:- Webix is an open-source JavaScript development library designed to speed up the process of web design.
  • Pixi.js:- The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Thumbnail Credit: https://cms-assets.tutsplus.com/

YOU MAY ALSO LIKE

2019 Fifa Women’s World Cup Line-Up

Rape Culture: Ways You Can Stand Against It

POPULAR POSTS

Vanessa Kirby Bio, Boyfriend, Movies & Net Worth
by Austin Eldrin, August 6, 2019
Billi Bruno Bio, Child, Net Worth, & Husband
by Austin Eldrin, August 6, 2019
Area 51 Nevada, Why All the Secrecy?
by Austin Eldrin, July 20, 2019
Aroldis Chapman Bio, Wiki, Net Worth
by Austin Eldrin, August 4, 2019