+- 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 Stacked Bar Example (/thread-100621.html)
[Tut] Chart JS Stacked Bar Example - xSicKxBot - 01-21-2023
Chart JS Stacked Bar Example
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/01/chart-js-stacked-bar-example.jpg" width="550" height="283" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on January 20th, 2023.</div>
<p>The ChartJS JavaScript library supports various types of charts to display on a webpage.</p>
<p>This quick example shows how to display a basic stacked bar chart using this library. The library initiation will be simple for all types of charts as we did in the <a href="https://phppot.com/javascript/chartjs-line-chart/">ChartJS line chart code</a>.</p>
<h2>Quick example</h2>
<div class="post-section-highlight" readability="74">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Stacked Bar Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Stacked Bar Chart Example</h1> <canvas id="stacker-bar-chart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> var ctx = document.getElementById("stacker-bar-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["< 100", "100 - 200", "300 - 400", "500 - 800", "900 - 1000"], datasets: [{ label: 'Lion', backgroundColor: "#51EAEA", data: [90, 120, 305, 526, 958], }, { label: 'Tiger', backgroundColor: "#FCDDB0", data: [82, 145, 335, 516, 936], }, { label: 'Elephant', backgroundColor: "#FF9D76", data: [62, 159, 375, 756, 951], }], }, options: { tooltips: { displayColors: true, callbacks: { mode: 'x', }, }, scales: { x: { stacked: true, }, y: { stacked: true } }, responsive: true } }); </script>
</body>
</html></code></pre>
</div>
<p><strong>Output:</strong></p>
<p>The graph output displays the stack on a vertical axis. It compares the animals’ counts at each point taken for the graph.</p>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/quick-example.jpg"><img loading="lazy" class="alignnone size-large wp-image-20276" src="https://phppot.com/wp-content/uploads/2023/01/quick-example-550x283.jpg" alt width="550" height="283" srcset="https://phppot.com/wp-content/uploads/2023/01/quick-example-550x283.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/quick-example-300x154.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/quick-example-768x395.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/quick-example.jpg 1154w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<p>The stacked bar chart plots a group of bars on top of one another. We have already seen grouped bar charts that combine bars side by side.</p>
<p>The grouped and stacked bar charts are used to show a comparison of data.</p>
<h2>ChartJS Horizontal stacked graph example</h2>
<p>This example is to display the stacked chart horizontally. The ChartJS initiation of this example differs from the above code only by the index axis.</p>
<p>This example specifies <em>indexAxis: ‘x’</em> to show a horizontal stacked bar chart. By specifying this the data points are taking the x-axis about which the bars are stacked on top of one another.</p>
<p class="code-heading">horizontal-stacked-chart.html</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Horizontal Stacked Bar Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Horizontal Stacked Bar Chart Example</h1> <canvas id="horizontal-stacker-bar-chart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> var ctx = document.getElementById("horizontal-stacker-bar-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["< 100", "100 - 200", "300 - 400", "500 - 800", "900 - 1000"], datasets: [{ label: 'Jaguar', backgroundColor: "#FB3569", data: [90, 120, 305, 526, 958], }, { label: 'Horse', backgroundColor: "#FCDDB0", data: [82, 145, 335, 516, 936], }, { label: 'Leopard', backgroundColor: "#82CD47", data: [62, 159, 375, 756, 951], }], }, options: { tooltips: { displayColors: true, callbacks: { mode: 'x', }, }, scales: { x: { stacked: true, }, y: { stacked: true } }, indexAxis: 'y', responsive: true } }); </script>
</body>
</html>
</code></pre>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar.jpg"><img loading="lazy" class="alignnone size-large wp-image-20277" src="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar-550x284.jpg" alt width="550" height="284" srcset="https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar-550x284.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar-300x155.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar-768x396.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/chartjs-horizontal-stacked-bar.jpg 1160w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<h2>About the ChartJS target and parameters to render the stacked bar chart</h2>
<p>Let us see some of the important parameters required to create the stacked bar chart for the browser.</p>
<p>The above two examples include the ChartJS library file using the CDN URL. It is preferable compared to having a local copy of this library.</p>
<p>This JS script targets a HTML canvas element to render the stacked bar chart.</p>
<p>It gets the canvas element context and uses it during the ChartJS initiation.</p>
<h3>What are the parameters for rendering the stacked bar using ChartJS?</h3>
<ul>
<li><em>type</em> – It requires specifying ‘bar’ as we did for <a href="https://phppot.com/javascript/chart-js-bar-chart-example/">displaying a ChartJS bar chart</a>.</li>
<li><em>data</em> – It prepares the array of <em>labels</em> and <em>datasets</em>.
<ul>
<li><em>labels</em> parameter has the data points.</li>
<li><em>datasets</em> have the readings with appropriate captions and colors.</li>
</ul>
</li>
<li><em>options</em> – It specifies the chart properties about the direction or axis. For example,
<ul>
<li><em>tooltips</em></li>
<li><em>scales</em></li>
<li><em>indexAxis</em></li>
<li><em>responsive</em></li>
</ul>
</li>
</ul>
<p>This example displays a responsive chart by setting the option <em>responsive</em> as <em>true</em>. We have also used <a href="https://phppot.com/php/draw-responsive-charts-pie-bar-column-using-google-charts/">Google charts to create responsive bar/column/pie charts</a>.<br /><a class="download" href="https://phppot.com/downloads/javascript/chartjs-stacked-bar.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-stacked-bar-example/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2023/01/20/chart-js-stacked-bar-example/
RE: [Tut] Chart JS Stacked Bar Example - JoeLie123 - 05-16-2023
The ChartJS JavaScript library offers a variety of charts for webpage display. This example demonstrates a basic stacked bar chart using the library. The graph compares animal counts at different points. Periodic report writing help can be valuable for analyzing and presenting data in such diagrams. Stacked bar charts are helpful for data comparison, and the example showcases a horizontal variation. The ChartJS parameters, including type, data, and options, define the chart's properties and behavior. A responsive design is achieved by setting the responsive option to true.