This video will demonstrate the line chart feature of chart.js
Line chart is a good way of showing trend of data points and comparison between data sets
With chart.js you can setup a line chart in just a few minutes!
First, we need to create a canvas for the chart area
Then include chart.js to your page
Get 2d context from the canvas
Next create Chart object with 2d context as parameter and call Line()
The data we pass into the Line method is the chart dataset. I'm going to use one on the chart.js documentation page
This is Line chart data which contains the data point values and chart properties like colors
The first data element is "labels" This defines the x-axis grid label. For this case, the label represent months
Next is dataset. As we can have multiple charts in one canvas, we can specify more than one datasets
I'll try removing one of the dataset and re-render. You'll see that the blue chart is gone
(well, let's add it back)
As you can see the data fields, you can customize most of the chart color properties and transparency (alpha value)
For example, I'll change the fillColor alpha value from 0.2 to 1
Let's try another setting - "pointHighlightFill"
This is the color when mouse pointer is over each data point
I guess you can experiment with the rest of setting. So I'm heading to the next element - "data"
data array defines y-axis value for each data point
chart.js will automatically scale the grid and chart size per data value entered
That's all about Line chart data structure. Next we'll talk about chart options which let you further customize the chart!
When we call Line() method to initialize the chart, if we do not specify the chart option, the default values will be used.
These are the default value for each options
I'm going to copy these and change some of them to demonstrate how they work
You can pass the chart option along with the data as a second parameter
The first option is "scaleShowGridLine" (Show/Hide Grid line)
"scaleGridLineColor" (Grid line color and alpha)
"scaleGridLineWidth" (Grid line size)
You can turn grid line on/off for each axis by flipping "scaleShowHorizontalLines" and "scaleShowVerticalLines"
"bezierCurve" (straight or curve line between data points)
You can change the data point dot size radius or hide the dot completely by changing "pointDot" and "pointDotRadius"
You can change the mouse hover detection range for each data point by changing "pointHitDetectionRadius"
"datasetStrokeWidth" set this to false to turn the line chart into x-y dot chart!
"datasetFill" (fill or no fill under the line area)
That's all about chart option overview. Next, we'll talk about dynamically populating the chart
First, I'm going to add a button and a click event to add data
chart.js already provided a method call addData() to programmatically add the data to the chart
Just put the array (y-axis value) and label as a parameters to the method
For removing data. Just use removeData()
Please noted that removeData() will always remove the first data point on the chart
Thanks for watching. Don't forget to like or subscribe if you like us :)