{"id":131335,"date":"2023-01-20T07:16:03","date_gmt":"2023-01-20T07:16:03","guid":{"rendered":"https:\/\/phppot.com\/?p=20257"},"modified":"2023-01-20T07:16:03","modified_gmt":"2023-01-20T07:16:03","slug":"chart-js-stacked-bar-example","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/01\/20\/chart-js-stacked-bar-example\/","title":{"rendered":"Chart JS Stacked Bar Example"},"content":{"rendered":"
by Vincy<\/a>. Last modified on January 20th, 2023.<\/div>\n

The ChartJS JavaScript library supports various types of charts to display on a webpage.<\/p>\n

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 ChartJS line chart code<\/a>.<\/p>\n

Quick example<\/h2>\n
\n
<!DOCTYPE html>\n<html>\n<head>\n<title>Chart JS Stacked Bar Chart Example<\/title>\n<link rel='stylesheet' href='style.css' type='text\/css' \/>\n<\/head>\n<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\/chart.js@4.0.1\/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>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n
Output:<\/strong><\/p>\n
The graph output displays the stack on a vertical axis. It compares the animals\u2019 counts at each point taken for the graph.<\/p>\n
<\/a><\/p>\n
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>\n
The grouped and stacked bar charts are used to show a comparison of data.<\/p>\n
ChartJS Horizontal stacked graph example<\/h2>\n
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>\n
This example specifies indexAxis: \u2018x\u2019<\/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>\n
horizontal-stacked-chart.html<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n<title>Chart JS Horizontal Stacked Bar Chart Example<\/title>\n<link rel='stylesheet' href='style.css' type='text\/css' \/>\n<\/head>\n<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\/chart.js@4.0.1\/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>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
<\/a><\/p>\n
About the ChartJS target and parameters to render the stacked bar chart<\/h2>\n
Let us see some of the important parameters required to create the stacked bar chart for the browser.<\/p>\n
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>\n
This JS script targets a HTML canvas element to render the stacked bar chart.<\/p>\n
It gets the canvas element context and uses it during the ChartJS initiation.<\/p>\n
What are the parameters for rendering the stacked bar using ChartJS?<\/h3>\n