Sick Gaming
[Tut] Chart JS Line Chart Example - Printable Version

+- Sick Gaming (https://sickgaming.net)
+-- Forum: Programming (https://sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://sickgaming.net/forum-82.html)
+--- Thread: [Tut] Chart JS Line Chart Example (/thread-100329.html)

[Tut] Chart JS Line Chart Example - xSicKxBot - 12-02-2022

Chart JS Line Chart Example

by Vincy. Last modified on December 1st, 2022.

It is one of the free and best JS libraries for charts. It supports rendering more types of chart in client side.

In this tutorial, we will see examples of rendering different types of line charts using the Chart.js library.

Quick example

The Chart JS library requires 3 things to be added to the webpage HTML to render the graph.

  1. Step 1: Include the Chart JS library file to the target HTML page.

  2. Step 2: Create a HTML canvas element to render the line chart.

  3. Step 3: Initiate the Chart JS library function with the data and other required options.

Code:
<canvas id="line-chart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("line-chart"), { type : 'line', data : { labels : [ 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050 ], datasets : [ { data : [ 186, 205, 1321, 1516, 2107, 2191, 3133, 3221, 4783, 5478 ], label : "America", borderColor : "#3cba9f", fill : false }] }, options : { title : { display : true, text : 'Chart JS Line Chart Example' } } }); </script>

The above script refers to the target canvas element on initiating the library class.

It pinpoints the graph readings with data properties. In addition, it specifies the line label, and border color. This quick example will output the following line chart to the browser.

Output:

[Image: chartjs-line-chart-output-550x286.jpg]

View Demo

A line chart is the best way to display analytics in a form of a catchy line graph. It also helps to compare one or more analytical lines.

In previous tutorials, we used different libraries to render different types of charts on a web page. See the below links if you want to refer.

More examples of line charts using Chart JS

The Chart JS supports creating a variety of line charts to plot the different perspectives of the data points.

  1. It supports drawing multiple lines of data points in a line chart which shows comparisons of data.

  2. It supports creating a linear line chart by applying formulas with x, and y coordinates.

  3. Rending sin waves in a Chart JS line chart with JS Math functions.

In the below sections, we will see examples of creating the following type of line charts using the Chart JS library.

  1. Multiple lines in a line chart.

  2. Gridlines – Line chart

Chart JS Multiple Lines Example

It outputs a Chart JS graph with two line charts. The script sets the dataset array for the two lines to be displayed on the graph.

The dataset is configured with the following display properties apart from the data points of the line chart.
  • label – to show with a tooltip on hovering a data point.

  • borderColor – Line border color.

  • fill – to enable or disable highlighting the chart area.

In this multi-line chart, the fill property is set to false, since the two chart areas overlap each other.

Code:
<!DOCTYPE html> <html> <head> <title>Chart JS Multiple Lines Example</title> <link rel='stylesheet' href='style.css' type='text/css' /> </head> <body> <div class="phppot-container"> <h1>Chart JS Multiple Lines Example</h1> <div> <canvas id="line-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("line-chart"), { type : 'line', data : { labels : [ 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050 ], datasets : [ { data : [ 186, 205, 1321, 1516, 2107, 2191, 3133, 3221, 4783, 5478 ], label : "America", borderColor : "#3cba9f", fill : false }, { data : [ 1282, 1350, 2411, 2502, 2635, 2809, 3947, 4402, 3700, 5267 ], label : "Europe", borderColor : "#e43202", fill : false } ] }, options : { title : { display : true, text : 'Chart JS Multiple Lines Example' } } }); </script> </body> </html>

[Image: chartjs-multi-line-chart-550x294.jpg]

Chart JS Gridlines – Line Chart Example

This JS script configures the same settings like as the above multi-line chart example. In addition, it configures the Chart JS scale properties to draw the grid in the x and y-axis.

The following display properties are used to show the grid in both axis of the. Chart JS graph.
  • display – a boolean value to enable or disable grid display on the chart.

  • color – the grid line border-color.

  • lineWidth – the stroke size of the grid line.

Code:
<!DOCTYPE html> <html> <head> <title>Chart JS Gridlines - Line Chart Example</title> <link rel='stylesheet' href='style.css' type='text/css' /> </head> <body> <div class="phppot-container"> <h1>Chart JS Gridlines - Line Chart Example</h1> <div> <canvas id="line-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script> <script> new Chart( document.getElementById("line-chart"), { type : 'line', data : { labels : [ 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050 ], datasets : [ { data : [ 186, 205, 1321, 1516, 2107, 2191, 3133, 3221, 4783, 5478 ], label : "America", borderColor : "#3cba9f", fill : false }, { data : [ 1282, 1350, 2411, 2502, 2635, 2809, 3947, 4402, 3700, 5267 ], label : "Europe", borderColor : "#e43202", fill : false } ] }, options : { title : { display : true, text : 'Chart JS Gridlines - Line Chart Example' }, scales : { x : { grid : { display : true, color: "#0046ff", lineWidth: 2 } }, y : { grid : { display : true, color: "#0046ff" } } } } }); </script> </body> </html>

[Image: chartjs-grid-line-chart-550x292.jpg]

More details about the basics of the Chart JS library

Knowing more about this very good JS library will be useful to use this graph confidently in production.

Without specifying dataset options or display properties, the default options will be applied. The following list shows the level of Chart.js options that will be resolved about the context. Read more about option resolution documentation provided by the Chart JS library.

Dataset and element properties with respect to the data and options
  • data.datasets[index] – options for this dataset only.

  • options.datasets.line – options for all line datasets.

  • options.elements.line – options for all line elements.

  • options.elements.point – options for all point elements.

  • options – options for the whole chart.

Display properties
  • backgroundColor

  • borderColor

  • borderWidth

  • fill

  • hoverBorderColor

  • label

  • pointStyle

  • xAxisID

  • yAxisID

Custom options

The Chart JS accepts a custom callback to be called on rendering each data point.

The callback function accepts the context reference to get the UI scope. The context hierarchy is shown in the below diagram.

[Image: chartjs-context-level-550x281.jpg]

Indexable options

Indexable options are used to define properties for the chart.js data item at a particular index.

It has a mapping array to link a property at a particular index to the data point of the chart at the same index.

If the array options property array length is less than the data array, then the property will be looped over.

The below code contains the options of setting line chart point color. It has only three pointBackgroundColor in the array. It will loop over to the data array of 10 elements.

Code:
datasets : [{ data : [ 186, 205, 1321, 1516, 2107, 2191, 3133, 3221, 4783, 5478 ], label : "America", borderColor : "#3cba9f", pointBackgroundColor: [ '#354abb', '#bb3c43' ], pointBorderColor: [ '#354abb', '#bb3c43' ], fill: false, borderWidth: 12 }]

[Image: chartjs-index-option-550x290.jpg]

Other chart types supported by the Chart.js library

The Chart JS library also supports creating other types of charts listed below. Let us see the example of creating a few of the below charts in the future.

  1. Area chart

  2. Bar chart

  3. Bubble chart

  4. Doughnut chart

  5. Line chart

  6. Mixed chart

  7. Polar Area chart

  8. Radar chart

  9. Scatter chart

View DemoDownload

↑ Back to Top