How to draw a horizontal bar chart using Chart JS

Hi friends, in this tutorial, you will learn how to draw a horizontal bar chart using Chart JS. Actually drawing a horizontal bar chart is the same as drawing a normal bar chart but the only difference is setting up the axis to ‘y’ in the options array.

Also read, How to draw a bar chart step by step using Chart JS

Also, you can show the bar values without the mouse hovering at the right side of each bar. So, let us take an example that demonstrates the employee ages corresponding to each of the employees. In order to draw the chart, please follow the below steps.

Required steps to draw a horizontal bar chart using Chart JS

Step 1:- Create an HTML file inside the root directory of your local server i.e. www.

Step 2:- Now, go to Google and search for chartjs plugin datalabels and copy the plugin src links, and paste into the head section of the HTML file as given below.

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

Step 3:- Now, create a div inside the HTML file to display the chart as given below.

<div style="width…