Chart Js Horizontal Bar chart – With Best 3 Examples

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

Hello, We are grateful that you keep visiting this blog. For your website or online application, you’ll regularly need to create charts; in this post, I’ll show you how to do it using the Chart Js library.

Once I give you a few instances of its Horizontal Bar chart, you will find it easy to comprehend how to use Chart Js.

In today’s tutorial, I’ll show you how to create a Horizontal Bar chart using a chart js.

Chart Js Horizontal Bar chart

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

There are two simple procedures for adding chart Js to an HTML page.

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

The second step is to download, save, and utilize the chart js library on your HTML page.

I’ll use the first approach in this article, which involves getting the chart js library through a CDN.

Simply copy the code below and put it in the head section of your HTML page or above the script element to utilize the chart js Cdn.

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

Once the aforementioned code has been implemented, the chart js functions are accessible for use.

Chart Js Horizontal Bar chart Example

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

<h1>Example of Horizontal Bar chart using Chart JS </h1>
<h2>Below Horizontal Bar Chart shows Weekly sales of Phone, Laptop and Desktop</h2>

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


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

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Phone', 'Laptop', 'Desktop'],
      datasets: [{
        label: 'Weekly Sales',
        data: [34000, 22000, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(201, 20, 11, 0.3)',
      'rgb(244, 100, 55, 0.3)',
      'rgb(93, 219, 12, 0.3)'
    ],
      borderColor: [
    'rgb(201, 20, 11, 0.3)',
      'rgb(244, 100, 55, 0.3)',
     'rgb(93, 219, 12, 0.3)'
     
    ]
      },
      ]

    },
     options: {
    indexAxis: 'y',
    
    elements: {
      bar: {
        borderWidth: 2,
      }
    },
  }});
</script>
	
</body>
</html>

How do you find the Horizontal Bar graph? Using the code I’ve provided, you can create a Horizontal Bar chart that looks much like the one in the top image. Include the aforementioned code in your web application or website. The Horizontal Bar chart will appear as seen in the previous image.

Now let me review the code. I have contacted the CDN here for the chart Js file that I had previously added to the HTML page’s head section.

The labels property in the chart code is where you add all the labels you want to appear in the Horizontal Bar chart. Finally, we reach the script tag.

The information you want to display on the Horizontal Bar chart will then be updated in the “data” property.

Simply add a set of colors to the “backgroundColor” element in the RGB format now that the Color may be altered easily.

BorderColor, which enables you to apply border color in RGB format, is used to color the borders of the chart’s Horizontal Bar.

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

size in the Horizontal Bar chart in chart js

The Horizontal Bar chart will be relatively large if you use the default configuration; however, you can reduce the size of the Horizontal Bar chart by utilizing the techniques detailed below.

The style attribute I put to the outside div of the canvas tag is visible in the code below. You can change the size from where it is now set at “25%” of the screen to 20% or 50%, depending on your needs, to raise or decrease it.

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

The complete code for the more compact Horizontal Bar chart can be found here.

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

<h1>Example of Horizontal Bar chart using Chart JS </h1>
<h2>Below Horizontal Bar Chart shows Weekly sales of Phone, 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: ['Phone', 'Laptop', 'Desktop'],
      datasets: [{
        label: 'Weekly Sales',
        data: [34000, 22000, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(201, 20, 11, 0.3)',
      'rgb(244, 100, 55, 0.3)',
      'rgb(93, 219, 12, 0.3)'
    ],
      borderColor: [
    'rgb(201, 20, 11, 0.3)',
      'rgb(244, 100, 55, 0.3)',
     'rgb(93, 219, 12, 0.3)'
     
    ]
      },
      ]

    },
     options: {
    indexAxis: 'y',
    
    elements: {
      bar: {
        borderWidth: 2,
      }
    },
  }});
</script>
	
</body>
</html>

Multiple Horizontal Bar chart using Chart JS

Multiple Horizontal Bar chart using Chart JS

I’ll show you how to utilize chart Js to make a Multiple Horizontal Bar chart.

Several Horizontal Bar charts are displayed in the top image.

You must alter the data set in order to obtain the same outcomes as those displayed in the top graphic. Three data sets are required to produce a multiple Horizontal bar chart like the one in the aforementioned image. I have written code for three various data sets, as you can see from the code below. If you want the exact same shade, select that color; otherwise, choose a different shade. I used various different colors for the coding.

 datasets: [{
        label: 'Phone',
        data: [2100, 3600, 7600],
        borderWidth: 1,
         backgroundColor: [
      'rgb(255, 10, 0, 0.3)'
        
    ],
      borderColor: [
     'rgb(255, 10, 0)',
       
     
    ]
      },{
        label: 'Laptop',
        data: [31000, 26000, 41000],
        borderWidth: 1,
        backgroundColor: [
     'rgb(100, 50, 0, 0.3)'
        
    ],
      borderColor: [
     'rgb(100, 50, 0)'       
     
    ]
      },
      {
        label: 'Desktop',
        data: [31000, 26000, 41000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(100, 0, 200, 0.3)',
        
    ],
      borderColor: [
     'rgb(100, 0, 200)',
        
     
    ]
      },

See the code below for a comprehensive example of a Multiple Horizontal Bar chart created using chart js.

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

<h1>Example of Multiple Horizontal Bar chart using Chart JS </h1>
<h2>Below Multiple Horizontal Bar Chart shows daily  <br/> sales of Phone, 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'],
      datasets: [{
        label: 'Phone',
        data: [2100, 3600, 7600],
        borderWidth: 1,
         backgroundColor: [
      'rgb(255, 10, 0, 0.3)'
        
    ],
      borderColor: [
     'rgb(255, 10, 0)',
       
     
    ]
      },{
        label: 'Laptop',
        data: [31000, 26000, 41000],
        borderWidth: 1,
        backgroundColor: [
     'rgb(100, 50, 0, 0.3)'
        
    ],
      borderColor: [
     'rgb(100, 50, 0)'       
     
    ]
      },
      {
        label: 'Desktop',
        data: [31000, 26000, 41000],
        borderWidth: 1,
        backgroundColor: [
      'rgb(100, 0, 200, 0.3)',
        
    ],
      borderColor: [
     'rgb(100, 0, 200)',
        
     
    ]
      },
      ]

    },    
  
options: {
indexAxis: 'y',

elements: {
bar: {
borderWidth: 2,
}
},
}});
</script>
	
</body>
</html>

	
</body>
</html>

Please leave a comment if you would like more examples of Horizontal Bar charts using chart js; I would be happy to give them to 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 *