What is a Bar Chart (Horizontal & Vertical) ?

A Bar Chart is a graph that represents data using rectangular bars. Each bar’s length represents the value of the data it shows.

A bar chart is a visual representation of data using rectangular bars. Bar charts can be either vertical or horizontal. In a vertical bar chart, the bars extend upwards from a horizontal axis (x-axis), with their height representing the data value. Conversely, a horizontal bar chart has bars extending from a vertical axis (y-axis), with their length representing the data value.

Key Differences:

Orientation:

Vertical bar charts have bars extending up, while horizontal bar charts have bars extending sideways.

Axes:

In vertical bar charts, the x-axis typically shows categories, and the y-axis shows the values. In horizontal bar charts, the y-axis shows the categories, and the x-axis shows the values.

Labels:

Horizontal bar charts are often preferred when dealing with long category labels, as they can be displayed more clearly along the vertical axis.

When to use which:

Vertical bar charts:

Useful for showing trends over time or comparing values across different categories, especially when the categories have relatively short names.

<canvas id="verticalBar"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById("verticalBar"), {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green'],
datasets: [{
label: 'Votes',
data: [12, 19, 7],
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Horizontal bar charts:

Useful for comparing data with long category labels or when you want to emphasize the magnitude of the values rather than the order.

<canvas id="horizontalBar"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById("horizontalBar"), {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Green'],
datasets: [{
label: 'Votes',
data: [10, 15, 8],
backgroundColor: ['red', 'blue', 'green']
}]
},
options: {
indexAxis: 'y', // 🔄 Makes it horizontal
responsive: true,
scales: {
x: {
beginAtZero: true
}
}
}
});
</script>