01-21-2023, 02:34 PM
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/20...00x154.jpg 300w, https://phppot.com/wp-content/uploads/20...68x395.jpg 768w, https://phppot.com/wp-content/uploads/20...xample.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/20...00x155.jpg 300w, https://phppot.com/wp-content/uploads/20...68x396.jpg 768w, https://phppot.com/wp-content/uploads/20...ed-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/...r-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/20...00x154.jpg 300w, https://phppot.com/wp-content/uploads/20...68x395.jpg 768w, https://phppot.com/wp-content/uploads/20...xample.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/20...00x155.jpg 300w, https://phppot.com/wp-content/uploads/20...68x396.jpg 768w, https://phppot.com/wp-content/uploads/20...ed-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/...r-example/