+- 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 Bar Chart Example (/thread-100559.html)
[Tut] Chart JS Bar Chart Example - xSicKxBot - 01-12-2023
Chart JS Bar Chart Example
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/01/chart-js-bar-chart-example.jpg" width="550" height="265" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on January 11th, 2023.</div>
<p>In this tutorial, we will see examples of using the Chartjs JavaScript library to create bar charts.</p>
<p>This quick example gives you the code to display a simple bar chart on the browser.</p>
<p>The below JavaScript code shows how to include and initiate the ChartJS library. It uses static data to set the bar chart labels and dataset in JavaScript.</p>
<h2>Quick example – Simple bar chart example via ChartJS</h2>
<div class="post-section-highlight" readability="55">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Bar Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Bar Chart Example</h1> <div> <canvas id="bar-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> // Bar chart new Chart(document.getElementById("bar-chart"), { type: 'bar', data: { labels: ["Elephant", "Horse", "Tiger", "Lion", "Jaguar"], datasets: [ { label: "Animals Count", backgroundColor: ["#51EAEA", "#FCDDB0", "#FF9D76", "#FB3569", "#82CD47"], data: [478, 267, 829, 1732, 1213] } ] }, options: { legend: { display: false }, title: { display: true, text: 'Chart JS Bar Chart Example' } } }); </script>
</body>
</html>
</code></pre>
</div>
<p><strong>Output:</strong></p>
<p>This example sets the chart parameters to the ChartJS <em>data</em> and the <em>options</em> array and displays the following bar chat to the browser.</p>
<p>This is a very easy client-side solution to display professional graphical representation in the form of a bar chart.</p>
<p>You can simply use this code in your project by tweaking the data points slightly.</p>
<p><img loading="lazy" class="alignnone wp-image-20228 size-large" src="https://phppot.com/wp-content/uploads/2023/01/simple-chartjs-bar-chart-550x265.jpg" alt width="550" height="265" srcset="https://phppot.com/wp-content/uploads/2023/01/simple-chartjs-bar-chart-550x265.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/simple-chartjs-bar-chart-300x144.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/simple-chartjs-bar-chart-768x369.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/simple-chartjs-bar-chart.jpg 1156w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Example 2: Horizontal bar chart</h2>
<p>This library supports creating both vertical and horizontal bar charts. But, the default is the vertical bar chart.</p>
<p>In this example, it creates a horizontal bar chart using the ChartJS plugin.</p>
<p>For the vertical or horizontal bar charts, the direction depends on the <em>indexAxis</em> option.</p>
<p>This example sets <em>indexAxis=’y’</em> to display the bars horizontally.</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Horizontal Bar Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Horizontal Bar Chart Example</h1> <div> <canvas id="horizontal-bar-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("horizontal-bar-chart"), { type: 'bar', data: { labels: ["Elephant", "Horse", "Tiger", "Lion", "Jaguar"], datasets: [{ label: "Animals count", backgroundColor: ["#51EAEA", "#FCDDB0", "#FF9D76", "#FB3569", "#82CD47" ], data: [478, 267, 829, 1732, 1213] }] }, options: { indexAxis: 'y', legend: { display: false }, title: { display: true, text: 'Chart JS Horizontal Bar Chart Example' } } }); </script>
</body>
</html>
</code></pre>
<p><strong>Output:</strong></p>
<p>This output screenshot plots the bar chart data index on the ‘y’ axis and has the readings on the ‘x-axis.</p>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar.jpg"><img loading="lazy" class="alignnone wp-image-20231 size-large" src="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar-550x268.jpg" alt width="550" height="268" srcset="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar-550x268.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar-300x146.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar-768x375.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-bar.jpg 1140w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<p>Previously, we used this JS library to create a pie chart using this ChartJS library. But, it is not supporting to display of 3D pie charts. See the linked article that uses <a href="https://phppot.com/javascript/chartjs-pie-chart/">Google charts for creating the 3D pie chart</a>.</p>
<h2>Example 3: Grouped bar chart</h2>
<p>Grouped bar charts are useful for showing a comparative reading.</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Grouped Bar Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Grouped Bar Chart Example</h1> <div> <canvas id="bar-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("bar-chart"), { type: 'bar', data: { labels: ["900", "950", "999", "1050"], datasets: [{ label: "Lion", backgroundColor: "#FF9D76", data: [234, 345, 567, 568] }, { label: "Tiger", backgroundColor: "#51EAEA", data: [233, 566, 234, 766] }] }, options: { legend: { display: false }, title: { display: true, text: 'Chart JS Grouped Bar Chart Example' } } }); </script>
</body>
</html>
</code></pre>
<p><strong>Output:</strong></p>
<p>It displays the record of two animals’ counts at a particular point. This will help compare the readings of two or more indexes.</p>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar.jpg"><img loading="lazy" class="alignnone wp-image-20226 size-large" src="https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar-550x272.jpg" alt width="550" height="272" srcset="https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar-550x272.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar-300x148.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar-768x379.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/chartjs-grouped-bar.jpg 1150w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<h2>ChartJS <em>type</em> parameter</h2>
<p>ChartJS is a dependable JS library to create and display graphs on a webpage.</p>
<p>In a previous tutorial, we have seen <a href="https://phppot.com/javascript/chartjs-line-chart/">how to create a line chart using this ChartJS library</a>.</p>
<p>Also, it supports generating more types of charts. The <em>type</em> parameter is used to define the type of the chart.</p>
<p>The dataset and the options definition may vary based on the type of chart.<br /><a class="download" href="https://phppot.com/downloads/javascript/chartjs-bar-chart.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/chart-js-bar-chart-example/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2023/01/05/chart-js-bar-chart-example/