PressTigers
How to draw customized line chart using Chart JS?
- February 5, 2019
- Leave a comment
Demographics & infographics are effective ways of information exposure in some conditions. In order to add those graphics to our HTML, one must know what JavaScript and charts are? Let’s have a quick look:
What are the Charts?
Charts is the graphical representation of data. Charts allow the user to see what the results of data to better understand and predict current and future data. Data can be presented in different forms, such as a line or pie chart.
What is JavaScript?
JavaScript is a light-weight scripting language that is used for:
- Add new HTML to webpage
- Change existing content
- Modify styles
- React to a user action
When talking about graphics in JavaScript, charts come into the mind. JavaScript has many powerful libraries that help to draw the charts. One of the most effective used built-in library is Chart JS.
What is Chart JS?
It’s a powerful library which has many built-in functions that we can utilize to draw a line chart.
Our goals to achieve:
Step 1:
First, we have to change the labels of both axes. We can do this by using a few properties of Chart class. The object of Chart class takes two arguments, one is canvas object and other is an array that contains “data” and “options”. We can define the labels of the x-axis in the data array. Data array contains a few properties that we can utilize for different purposes. For now, we are changing the labels, we will focus on those properties. You can explore all the properties from here.
Let’s discuss the two parameters that we mentioned above:
- Data
- Options
Data is actually an array that contains the labels and dataset of both axes. We can utilize different properties provided by the library to draw dataset. Options are also an array that utilizes to define the range of dataset and styling of its data.
Step 2:
Now we have to define the dataset. As per our requirement, we have three datasets:
- Extra Space Storage Inc.
- S&P 500
- FTSE BAREIT Equity REITs
We can define the dataset as shown:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
datasets: [{ label: ['Extra Space Storage Inc.'], data: [100, 110, 150, 270, 250, 300], }, { label: ['S&P 500'], data: [100, 120, 130, 130, 150, 190], }, { label: ['FTSE NAREIT Equity REITs'], data: [100, 100, 120, 120, 130, 140], } ] |
This will work for the x-axis. For y-axis, values/labels auto-generated according to data provided. For example, in the above code, we have data in the range of 100-300, so it will generate the labels from 0-300. (Min value is 0, will discuss it later on.)
Step 3:
As per our requirement, we want to define our range with a ‘$’ sign. How can we do this? For this we have another parameter that we passed to Chart object called “options”, we will define the range according to our need. See below:
We can define the dataset as shown:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
yAxes: [{ ticks: { min: 0, max: 350, beginAtZero: true, fontSize: 18, padding: 15, callback: function(value, index, values) { return '$' + value; } }, }], |
As you can see above, we have set the range of y-axis using min and max. We have also defined the callback function here, that used to define the ‘$’ before the value.
Step 4:
According to library “legend” is the part of the options array that we utilize to define different properties on labels. We can define it in options array like:
|
1 2 3 4 5 6 7 8 9 |
legend: { display: true, position: 'bottom', labels: { fontSize: 18, boxWidth: 16, padding: 25, } } |
That’s it.
Chart JS library has many more properties and functions that we can use to draw awesome charts. For advance exploration, you must follow link here.
Written By: Nabeel
User Comments