Chart Js Bar chart – With Best 3 Examples

Find out how to make a Chart Js Bar chart. You may learn how to build charts with JavaScript by using the example below.

Hello, We appreciate you returning to this blog. You frequently need to make charts for your website or web application; in this post, I’ll demonstrate how to do it using the Chart Js library.

You will find it simple to understand how to use Chart Js once I provide several examples of its Bar chart.

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

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

There are two straightforward methods for installing chart js on an HTML page.

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

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

In this piece, I’ll employ the first strategy, which entails using a CDN to retrieve the chart js library.

To use the chart js Cdn, just 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 functions of chart js are available for use when the above code has been added.

Chart Js Bar chart Example

Chart Js Bar chart Example

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

<h1>Example of Bar chart using Chart JS </h1>
<h2>Below Bar Chart shows daily sales of Chair, Table, Lamp</h2>

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


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

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Chair', 'Table', 'Lamp'],
      datasets: [{
        label: 'Daily Sales',
        data: [2000, 3500, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
      'rgb(255, 84, 46, 0.3)',
      'rgb(95, 255, 99, 0.3)'
    ],
      borderColor: [
     'rgb(200, 10, 0)',
      'rgb(255, 84, 46)',
      'rgb(95, 255, 99)'
     
    ]
      },
      ]

    },
    
  });
</script>
	
</body>
</html>

Do you like the Bar chart? You can construct a Bar chart similar to the one in the above image using the code I have provided. Put the aforementioned code into your website or web application. The Bar chart will show up as in the preceding picture.

I’ll now go over the code. For the chart Js file that I had previously inserted into the HTML page’s head section, I have called the CDN here.

You add all the labels you wish to see in the Bar chart to the labels property in the chart code. We now get at the script tag.

The “data” attribute will then be updated with the information you want to show on the Bar chart.

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

The chart’s bars’ borders are colored using borderColor, which allows you to add border color in RGB format.

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

set size in the Bar chart in chart js

If you use the default configuration, the Bar chart will be relatively large; however, you can reduce the Bar chart size by making use of the methods described below.

You can see in the code below that I added a style attribute to the outside div of the canvas tag. According to your demands, you can increase or decrease it by altering the size to 20% or 50% from where it is currently set at “25%” of the screen.

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

The code below contains the whole code for the smaller Bar chart.

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

<h1>Example of Bar chart using Chart JS </h1>
<h2>Below Bar Chart shows daily sales of Chair, Table, Lamp</h2>

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


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

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Chair', 'Table', 'Lamp'],
      datasets: [{
        label: 'Daily Sales',
        data: [2000, 3500, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
      'rgb(255, 84, 46, 0.3)',
      'rgb(95, 255, 99, 0.3)'
    ],
      borderColor: [
     'rgb(200, 10, 0)',
      'rgb(255, 84, 46)',
      'rgb(95, 255, 99)'
     
    ]
      },
      ]

    },
    
  });
</script>
	
</body>
</html>

Multiple Bar chart using Chart JS

Multiple Bar chart using Chart JS

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

The image up top shows the Multiple Bar charts.

To get the same results as those shown in the top graphic, you must fiddle with the data set. To create a multiple bar chart like the above image, three data sets are necessary. As you can see from the code below, I have written code for three different data sets. You can use that color if you want the same shade; if not, you can use a different shade. I inserted code in several different colors.

{
      labels: ['Monday', 'Tuesday', 'Wednesday'],
      datasets: [{
        label: 'Chair Daily Sales',
        data: [2000, 3500, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(200, 10, 0, 0.3)',
         'rgb(200, 10, 0, 0.3)',
    ],
      borderColor: [
     'rgb(200, 10, 0)',
     'rgb(200, 10, 0)',
       'rgb(200, 10, 0)',
     
    ]
      },{
        label: 'Table Daily Sales',
        data: [3000, 2500, 4000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(10, 100, 0, 0.3)',
         'rgb(10, 100, 0, 0.3)',
          'rgb(10, 100, 0, 0.3)',
    ],
      borderColor: [
   'rgb(10, 100, 0)',
     'rgb(10, 100, 0)',
        'rgb(10, 100, 0)',
    ]
      },
      {
        label: 'Lamp Daily Sales',
        data: [3500, 1000, 2000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 100, 0, 0.3)',
         'rgb(200, 100, 0, 0.3)',
         'rgb(200, 100, 0, 0.3)',
    ],
      borderColor: [
   'rgb(200, 100, 0)',
     'rgb(200, 100, 0)',
        'rgb(200, 100, 0)',
    ]
      },

For a complete example of a Multiple Bar chart using chart js, please see the code below.

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

<h1>Example of Multiple Bar chart using Chart JS </h1>
<h2>Below Multiple Bar Chart shows daily sales of Chair, Table and Lamp</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: 'Chair Daily Sales',
        data: [2000, 3500, 7500],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 10, 0, 0.3)',
        'rgb(200, 10, 0, 0.3)',
         'rgb(200, 10, 0, 0.3)',
    ],
      borderColor: [
     'rgb(200, 10, 0)',
     'rgb(200, 10, 0)',
       'rgb(200, 10, 0)',
     
    ]
      },{
        label: 'Table Daily Sales',
        data: [3000, 2500, 4000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(10, 100, 0, 0.3)',
         'rgb(10, 100, 0, 0.3)',
          'rgb(10, 100, 0, 0.3)',
    ],
      borderColor: [
   'rgb(10, 100, 0)',
     'rgb(10, 100, 0)',
        'rgb(10, 100, 0)',
    ]
      },
      {
        label: 'Lamp Daily Sales',
        data: [3500, 1000, 2000],
        borderWidth: 1,
         backgroundColor: [
      'rgb(200, 100, 0, 0.3)',
         'rgb(200, 100, 0, 0.3)',
         'rgb(200, 100, 0, 0.3)',
    ],
      borderColor: [
   'rgb(200, 100, 0)',
     'rgb(200, 100, 0)',
        'rgb(200, 100, 0)',
    ]
      },
      ]

    },
    
  });
</script>
	
</body>
</html>

If you would want more bar chart examples using chart js, kindly leave a comment; I would be pleased to provide them.

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 *