Sample Horizontal Bar Chart With Datalabels in Chart.js

Chart.js is a javascript charting library that can be used to create various types of charts and display them in a webpage. You do not need to be a master of javascript to create good looking charts in chart.js. From line chart to bar chart and pie or doughnut charts, there are various types of charts one can easily draw using chart.js.

If you want to draw a horizontal bar chart in chart.js, the process is rather simple. In this post, we will provide you the code and the settings required for drawing simple horizontal bar charts. If you want you can assign different colors to the bars to make the horizontal bar chart look colorful.

As a first step, we need to install the chart.js library. Chart.js can be installed using npm or the cdn link. The cdn method is our recommended method. You can add the cdn link in the header and start drawing excellent looking charts on your website.

You can get the latest version from the chart.js website. In this tutorial we are using chart.js version 4.4.0 for drawing a horizontal bar chart.

Install Chart.js library

The following cdn link can be added to the website header to install the chart.js javascript library.

<script src=" https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js "></script>

Otherwise, if you have access to your server, you can also install the library on your server using npm. You will need to have node or nom installed on your server. SSH to your server and then run the following command:

npm install chart.js

Done. This will install chart.js on your server and you can start creating charts now.

Now, let’s move to the html code for drawing the chart.

How to create a simple horizontal bar chart in chart.js?

We first need to draw a canvas to draw any type of chart, which can be easily added inside a div in the following manner.

``

Once we have created the canvas to draw the chart, we can add the script to display the chart:

<div>
<canvas id="myChart"></canvas>
</div>

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

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

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2023', '2022', '2021', '2020', '2019', '2018'],
      datasets: [{
        label: 'Number of members',
        data: [46, 51, 47, 43, 42, 42],
          backgroundColor: [
      'rgba(255, 99, 132, 0.5)',
      'rgba(255, 159, 64, 0.5)',
      'rgba(255, 205, 86, 0.5)',
      'rgba(75, 192, 192, 0.5)',
      'rgba(54, 162, 235, 0.5)',
      'rgba(153, 102, 255, 0.5)',
    ],
   

      
        borderRadius: 5,
      }]
    },
options: { plugins:{ tooltip:{mode: 'index'}, }, scales: { y: { beginAtZero: true, } } } });

</script>

This code outputs a simple bar chart that displays the number of members in a committee from 2018 to 2023.

However, it is still a vertical bar chart that we need to change to a horizontal bar chart. To achieve that, we need to change the base axis from x to y. It can be done by adding a simple setting to this code.

 options: { plugins:
   { indexAxis: 'y'},
  }

This will change the indexAxis to y and you will have a horizontal bar chart looking like the following:

Now, the complete code for the horizontal bar chart will look something like this.

<div>
<canvas id="myChart"></canvas>
</div>

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

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

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2023', '2022', '2021', '2020', '2019', '2018'],
      datasets: [{
        label: 'Number of members',
        data: [46, 51, 47, 43, 42, 42],
          backgroundColor: [
      'rgba(255, 99, 132, 0.5)',
      'rgba(255, 159, 64, 0.5)',
      'rgba(255, 205, 86, 0.5)',
      'rgba(75, 192, 192, 0.5)',
      'rgba(54, 162, 235, 0.5)',
      'rgba(153, 102, 255, 0.5)',
    ],
   

      
        borderRadius: 5,
      }]
    },
options: { plugins:{ tooltip:{mode: 'index'}, legend:{position: 'bottom'} }, 
indexAxis: 'y',
scales: { y: { beginAtZero: true, } } } });

</script>

You have created a simple horizontal bar chart. Further, this chart can be customized to make it more attractive. For example, you can remove the grid lines and add data labels to the horizontal bar chart. As you can see in the above example, we have the legend positioned at the top which is its default position. This position can be changed or the legend can be entirely removed from the chart canvas. If you want, you can add the title and subtitles to your chart.

How to change the legend position in the chart in chart.js?

The chart legend displays information regarding the datasets included in the chart. It appears at the top by default. However, the top position may not always be suitable for the legend and you may want to position it on either side or at the bottom. The position of the legend on the canvas area can be changed by setting the legend position to left, right or bottom, If you do not want to show a legend on the canvas, then you can simply set its display to false.

The legend settings in chart.js are included inside the options and plugins in the following manner:

options: {plugins: 
{legend: {position: ‘bottom’}}
},

Now, as you can see in the following image, the legend is positioned at the bottom.

This is how you can easily change the legend position in chart.js. Apart from the top, left, right and bottom, there is also a chart area position for legend. If you want the legend to be shown inside the chart, you must set the value for position to ‘chartArea’. This will position the legend on the left in the middle.

How to add datalabels to a chart in chart.js?

Datalabels are available in chart.js as a plugin. You can install it using npm or add to your graphs using the cdn link.

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

The datalabels plugin must be loaded after the chart.js library. After adding the cdn link or installing the plugin, you also need to register the plugin using:

Chart.register(ChartDataLabels);

You can customize the datalabels like change their position, alignment, font color, font style and weight and so on. When you are drawing a horizontal bar chart, you can position the datalabels in the center, by anchoring it in the center. You can anchor datalabels at the center or at the start or end.

For example:

<div>
<canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>

<script>
Chart.register(ChartDataLabels);
  var ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2023', '2022', '2021', '2020', '2019', '2018'],
      datasets: [{
        label: 'Number of members',
        data: [46, 51, 47, 43, 42, 42],
          backgroundColor: [
      'rgba(255, 99, 132, 0.5)',
      'rgba(255, 159, 64, 0.5)',
      'rgba(255, 205, 86, 0.5)',
      'rgba(75, 192, 192, 0.5)',
      'rgba(54, 162, 235, 0.5)',
      'rgba(153, 102, 255, 0.5)',
    ],
   

      
        borderRadius: 5,
      }]
    },
options: { plugins:{ tooltip:{mode: 'index'}, legend:{position: 'bottom'}, datalabels: {align: 'end', anchor: 'center', font: {weight: 'bold'}} }, 
indexAxis: 'y',
scales: { y: { beginAtZero: true, } } } });

</script>

In the above code, we have further customized the datalabels by adding properties inside the options -> plugins section. Now, the graph will look like the following:

The align: ‘end’ and anchor: ‘center’ properties are used to fix the datalabels in the center of each bar according to the size of the bar. We have also added the font: bold property to the datalabels so that they appear bold and can be read easily.

Suggested Reading:

• Create Stacked Horizontal Bar Charts in Chart.js

• Create a Stacked Bar Chart in Chart.js