+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.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
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/12/chart-js-line-chart-example.jpg" width="550" height="286" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on December 1st, 2022.</div>
<p>It is one of the free and best JS libraries for charts. It supports rendering more types of chart in client side.</p>
<p>In this tutorial, we will see examples of rendering different types of line charts using the Chart.js library.</p>
<h2>Quick example</h2>
<p>The Chart JS library requires 3 things to be added to the webpage HTML to render the graph.</p>
<ol>
<li>Step 1: Include the Chart JS library file to the target HTML page.</li>
<li>Step 2: Create a HTML canvas element to render the line chart.</li>
<li>Step 3: Initiate the Chart JS library function with the data and other required options.</li>
</ol>
<div class="post-section-highlight" readability="61">
<pre class="prettyprint"><code class="language-php-template"><canvas id="line-chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
</code></pre>
</div>
<p>The above script refers to the target canvas element on initiating the library class.</p>
<p>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.</p>
<p><strong>Output:</strong></p>
<p><img loading="lazy" class="alignnone size-large wp-image-20069" src="https://phppot.com/wp-content/uploads/2022/11/chartjs-line-chart-output-550x286.jpg" alt="chartjs line chart output" width="550" height="286" srcset="https://phppot.com/wp-content/uploads/2022/11/chartjs-line-chart-output-550x286.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/chartjs-line-chart-output-300x156.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/chartjs-line-chart-output.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><a class="demo" href="https://phppot.com/demo/chartjs-line-chart/">View Demo</a></p>
<p>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.</p>
<p>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.</p>
<h2>More examples of line charts using Chart JS</h2>
<p>The Chart JS supports creating a variety of line charts to plot the different perspectives of the data points.</p>
<ol>
<li>It supports drawing multiple lines of data points in a line chart which shows comparisons of data.</li>
<li>It supports creating a linear line chart by applying formulas with x, and y coordinates.</li>
<li>Rending sin waves in a Chart JS line chart with JS Math functions.</li>
</ol>
<p>In the below sections, we will see examples of creating the following type of line charts using the Chart JS library.</p>
<ol>
<li>Multiple lines in a line chart.</li>
<li>Gridlines – Line chart</li>
</ol>
<h2 class="p1">Chart JS Multiple Lines Example</h2>
<p>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.</p>
<p>The dataset is configured with the following display properties apart from the data points of the line chart.</p>
<ul>
<li><strong>label</strong> – to show with a tooltip on hovering a data point.</li>
<li><strong>borderColor</strong> – Line border color.</li>
<li><strong>fill</strong> – to enable or disable highlighting the chart area.</li>
</ul>
<p>In this multi-line chart, the <em>fill</em> property is set to <em>false</em>, since the two chart areas overlap each other.</p>
<pre class="prettyprint"><code class="language-php-template"><!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/[email protected]/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>
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-20074" src="https://phppot.com/wp-content/uploads/2022/11/chartjs-multi-line-chart-550x294.jpg" alt="chartjs multi line chart" width="550" height="294" srcset="https://phppot.com/wp-content/uploads/2022/11/chartjs-multi-line-chart-550x294.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/chartjs-multi-line-chart-300x161.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/chartjs-multi-line-chart.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2 class="p1">Chart JS Gridlines – Line Chart Example</h2>
<p>This JS script configures the same settings like as the above multi-line chart example. In addition, it configures the Chart JS <strong>scale</strong> properties to draw the grid in the x and y-axis.</p>
<p>The following display properties are used to show the grid in both axis of the. Chart JS graph.</p>
<ul>
<li><strong>display</strong> – a boolean value to enable or disable grid display on the chart.</li>
<li><strong>color</strong> – the grid line border-color.</li>
<li><strong>lineWidth</strong> – the stroke size of the grid line.</li>
</ul>
<pre class="prettyprint"><code class="language-php-template"><!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/[email protected]/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>
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-20075" src="https://phppot.com/wp-content/uploads/2022/11/chartjs-grid-line-chart-550x292.jpg" alt="chartjs grid line chart" width="550" height="292" srcset="https://phppot.com/wp-content/uploads/2022/11/chartjs-grid-line-chart-550x292.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/chartjs-grid-line-chart-300x159.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/chartjs-grid-line-chart-768x407.jpg 768w, https://phppot.com/wp-content/uploads/2022/11/chartjs-grid-line-chart.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>More details about the basics of the Chart JS library</h2>
<p>Knowing more about this very good JS library will be useful to use this graph confidently in production.</p>
<p>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 <a href="https://www.chartjs.org/docs/latest/general/options.html" target="_blank" rel="noopener">option resolution documentation</a> provided by the Chart JS library.</p>
<h3>Dataset and element properties with respect to the <em>data</em> and <em>options</em></h3>
<ul>
<li>data.datasets[index] – options for this dataset only.</li>
<li>options.datasets.line – options for all line datasets.</li>
<li>options.elements.line – options for all line elements.</li>
<li>options.elements.point – options for all point elements.</li>
<li>options – options for the whole chart.</li>
</ul>
<h3>Display properties</h3>
<ul>
<li>backgroundColor</li>
<li>borderColor</li>
<li>borderWidth</li>
<li>fill</li>
<li>hoverBorderColor</li>
<li>label</li>
<li>pointStyle</li>
<li>xAxisID</li>
<li>yAxisID</li>
</ul>
<h3>Custom options</h3>
<p>The Chart JS accepts a custom callback to be called on rendering each data point.</p>
<p>The callback function accepts the context reference to get the UI scope. The context hierarchy is shown in the below diagram.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-20086" src="https://phppot.com/wp-content/uploads/2022/11/chartjs-context-level-550x281.jpg" alt="chartjs context level" width="550" height="281" srcset="https://phppot.com/wp-content/uploads/2022/11/chartjs-context-level-550x281.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/chartjs-context-level-300x153.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/chartjs-context-level.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>Indexable options</h3>
<p>Indexable options are used to define properties for the chart.js data item at a particular index.</p>
<p>It has a mapping array to link a property at a particular index to the data point of the chart at the same index.</p>
<p>If the array options property array length is less than the data array, then the property will be looped over.</p>
<p>The below code contains the options of setting line chart point color. It has only three <strong>pointBackgroundColor</strong> in the array. It will loop over to the data array of 10 elements.</p>
<pre class="prettyprint"><code class="language-javascript">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
}]
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-20087" src="https://phppot.com/wp-content/uploads/2022/11/chartjs-index-option-550x290.jpg" alt="chartjs index option" width="550" height="290" srcset="https://phppot.com/wp-content/uploads/2022/11/chartjs-index-option-550x290.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/chartjs-index-option-300x158.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/chartjs-index-option.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Other chart types supported by the Chart.js library</h2>
<p>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.</p>
<ol>
<li>Area chart</li>
<li>Bar chart</li>
<li>Bubble chart</li>
<li>Doughnut chart</li>
<li>Line chart</li>
<li>Mixed chart</li>
<li>Polar Area chart</li>
<li>Radar chart</li>
<li>Scatter chart</li>
</ol>
<p><a class="demo" href="https://phppot.com/demo/chartjs-line-chart/">View Demo</a><a class="download" href="https://phppot.com/downloads/javascript/chartjs-line-chart.zip">Download</a></p>
<p> <!-- #comments --> </p>
<p> <a href="https://phppot.com/javascript/chartjs-line-chart/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/12/01/chart-js-line-chart-example/