Chart Js Stacked Bar chart – With Best 2 Examples

Learn how to create a Stacked Bar chart using Chart Js. With the example below, you can learn Chart js Stacked Bar chart.

Hello, We appreciate your continued interest in this site. You’ll frequently need to generate charts for your website or online application; in this piece, I’ll demonstrate how to do so using the Chart Js library.

You will easily understand how to utilize Chart Js once I show you a few examples of its Stacked Bar chart.

I’ll demonstrate how to make a Stacked Bar chart with chart js in today’s lesson.

How to add a Stacked Bar chart using Chart JS to an HTML page.

Chart Js can be added to an HTML page using one of two straightforward methods.

The first method, which involves calling the chart js CDN to install it on an HTML website, is the simplest.

The chart js library needs to be downloaded, saved, and used on your HTML page as the second step.

In this essay, I’ll utilize the first strategy, which entails downloading the chart js library via a CDN.

To use the chart js Cdn, simply copy the code below and paste it in the head section of your HTML page or above the script element.

	
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

The chart js functions are available for use once the aforementioned code has been implemented.

Chart Js Stacked Bar chart Example

Chart Js Stacked Bar chart Example
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Example of Stacked Bar chart using Chart JS </h1>
<h2>Below Stacked Bar Chart shows daily <br/> Profit of Mobile, Laptop and Desktop</h2>

<div style="width: 45%;">
  <canvas id="myChart"></canvas>
</div>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
      datasets: [{
        label: 'Mobile',
        data: [21000, 36000, 76000, 40000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(0, 255, 0, 0.3)'
    ]
      },{
        label: 'Laptop',
        data: [21000, -26000, 41000, 45000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(250, 0, 0, 0.3)'
       
    ]
      },{
        label: 'Desktop',
        data: [21000, -26000, 41000, 45000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(0, 0, 255, 0.3)'
       
    ]
      },
      ]

    },    
    options: {
scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }}});
</script>
	
</body>
</html>

How are Stacked Bar charts located? You may produce a Stacked Bar chart that is closely likes the one in the top image by using the code I’ve provided. Include the aforementioned code in your website or web application. The preceding image’s Stacked Bar chart will now appear.

Let me now go over the code. For the chart Js file that I had previously put to the HTML page’s head area, I have gotten in touch with the CDN here.

You add all the labels you wish to show up in the Stacked Bar chart to the labels property in the chart code. We arrive at the script tag finally.

The “data” property will then be changed with the data that you want to show on the Stacked Bar chart .

Now that the Color may be changed simply, just add a set of colors to the “backgroundColor” element in the RGB format.

The Stacked Bar chart borders are colored using BorderColor, which lets you apply border color in RGB format.

How to set size in the Stacked Bar chart in chart js.

set size in the Stacked Bar chart in chart js

If you use the default configuration, the Stacked Bar chart will be very large; however, you can minimize its size by making use of the methods described below.

The code below shows the style attribute I applied to the canvas tag’s outside div. Depending on your demands, you can modify the size from where it is now set at “25%” of the screen to 20% or 50%.

<div style="width: 25%;">
  <canvas id="myChart"></canvas>
</div>


You can find the full source code for the smaller Stacked Bar chart here.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Example of Stacked Bar chart using Chart JS </h1>
<h2>Below Stacked Bar Chart shows daily <br/> Profit of Mobile, Laptop and Desktop</h2>

<div style="width: 25%;">
  <canvas id="myChart"></canvas>
</div>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
      datasets: [{
        label: 'Mobile',
        data: [21000, 36000, 76000, 40000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(0, 255, 0, 0.3)'
    ]
      },{
        label: 'Laptop',
        data: [21000, -26000, 41000, 45000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(250, 0, 0, 0.3)'
       
    ]
      },{
        label: 'Desktop',
        data: [21000, -26000, 41000, 45000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(0, 0, 255, 0.3)'
       
    ]
      },
      ]

    },    
    options: {
scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }}});
</script>
	
</body>
</html>

If you would want more examples of Stacked Bar charts using chart js, kindly leave a comment; I would be pleased to provide them for you.

Chart Js With More Articles

*** Line Chart

*** Pie chart

*** Bar chart

*** Doughnut chart

***  Horizontal Bar chart

*** Stacked Bar chart

*** Chart Js Website

Leave a Comment

Your email address will not be published. Required fields are marked *