Make a Horizontal Bar Chart with ChartJS
Jan 18, 2023
Making a bar chart horizontal in ChartJS is easy. However, you need to do things a little differently in ChartJS 2 vs ChartJS 3+.
ChartJS 3+
In ChartJS 3+, you should set the indexAxis: 'y' option as follows.
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'Easy as',
data: [1, 2, 3],
}],
},
options: {
indexAxis: 'y', // <-- here
responsive: true
}
});ChartJS 2
In ChartJS 2, just set the chart's type to 'horizontalBar' instead of 'bar' as follows.
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'horizontalBar', // <-- instead of 'bar'
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'Easy as',
data: [1, 2, 3],
}],
},
options: {
responsive: true
}
});
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!