What is Chart.js?
There are many libraries that can help you visualize some data in a blog post or for a presentation. One of the libraries that you can use is Chart.js. Chart.js is created by a London-based web-developer, Nick Downie in 2013. It is being maintained by the second most popular JS charting library on GitHub. Chart.js is a free open-source JavaScript library and free to all the users that helps them plot the data in a web application.
Chart.js supports the 8 chart types which are bar, line, area, pie or doughnut, bubble, radar, and scatter. Here is an example of a Bar Chart that is created using Chart.js:
The example of the Bar Chart that is created using Chart.js shows that everytime you hover over, it has a tool tip that gives a little bit of animation and shows some information about the data.
Chart.js can be use in HTML5 canvas element, where canvas is an element that is easy and powerful way to draw the graphics using JavaScript. You can use it to draw graphs, make photo compositions, or do some simple animations. The website of Chart.js has lots of documentation that shows the basic information when creating a simple chart.
Different methods to install Chart.js
Chart.js has different methods on how to install it. If you want to use Chart.js with Node.js, you can do the npm installation: npm install chart.js — save. The other method that you can use is the Bower, which is a front-end package manager. The last method that you can also use is the remote link to the Chart.js file which is this link: https://cdnjs.com/libraries/Chart.js and you will need to use the last link that is provided. The link will be included on the header of the HTML file that you are creating and it will be inside the script tag.
Why do people use Chart.js?
It is easy and simple.
Chart.js can be used with plain JavaScript or with different module loader. Even if you are not a JavaScript pro, you can create different chart types that you can use to show the data in a great way using Chart.js. You just need a little JavaScript and HTML and you will be able to create charts. Chart.js are rendered using canvas element that has support in all browsers. Here is an example on how to use the remote link for Chart.js in HTML inside the script tag:
You can customize the chart in different ways using the properties that you also use in CSS, like changing the background color, border width, font size, font family, etc. One of the properties is when changing the colors of each data. You can use color names, hexadecimal values, or RGBA values when changing the color of each data on your chart types.
When you check the website of Chart.js, you can see that you can create mixed chart types which is the combination of bar and line charts. When using mixed chart types, it can provide a clear visual difference between the datasets. You can also create an animation where it shows the changing of the data, update of the colors, and when adding datasets.
Resources for Chart.js
There are some resources that you can use to learn more about Chart.js. One of them is the main website of Chart.js. As I mentioned on the previous paragraph, it shows all the chart types that you can create using the library. The website also shows all the different methods on how you can use Chart.js on your projects. They have an example code and also show different ways on how to customize the chart types that you created. Another resource that you can use is some tutorial from YouTube. You can just simply type on the search bar “Tutorials for Chart.js” and many videos will show on the website.
Sources:
Chart.js website: https://www.chartjs.org/
Wikipedia: https://en.wikipedia.org/wiki/Chart.js
Getting Started With Chart.js: https://www.youtube.com/watch?v=sE08f4iuOhA&t=
ChartJS Tutorials #1 — Getting Setup: https://www.youtube.com/watch?v=Bd309s4Bkac