Chart.js Bar chart is a graph that uses rectangular bars to show data. The length of each bar corresponds to the value it represents, making it easy to compare several groupings quickly. Usually, the vertical axis shows the values’ scale, and the horizontal axis denotes categories or labels.
Bar charts are frequently used for showing and analyzing a variety of information kinds, from survey findings to financial data, because they are effective at presenting data in a clear and intelligible fashion. They offer a simple visual aid for information transferring and data analysis, helping to spot patterns or trends.
Syntax:
let myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
Dataset Properties:
- label – the label for the dataset that labels each bar.
- data – For inserting the data as the height of each bar.
- backgroundColor – it is used to color each bar.
- borderColor – it colors the border of the bars.
- borderWidth – it sets the width of the bars.
- options – it configures the whole chart like
- Scales – represents the units used on the graph.
Styling:
- backgroundColor: It colours the bars with different colours.
- borderColor: It colours the border of the bar with different colours.
- borderRadius: It makes the corner of the bars curve and smooth.
- hoverBackgroundColor: The colour of the bars changes the when cursor point on it.
- hoverBorderColor: The colour of border of the bar changes when cursor point on it.
- hoverBorderWidth: The width of the border of the bar changes when cursor point on it.
CDN link:
https://cdn.jsdelivr.net/npm/chart.jsExample 1: The following code shows a simple example of a bar chart with labels on the horizontal axis and a heights of the bars on the vertical axis.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bar Chart Example</title>
<!-- Include Chart.js from CDN -->
<script src=
</script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
canvas {
border: 2px solid #858080;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Bar Chart Example</h2>
<!-- Creating an element -->
<canvas id="myBarChart"
width="380"
height="180">
</canvas>
<script>
// data sample for the chart
let data = {
labels: ['Label 1', 'Label 2',
'Label 3', 'Label 4',
'Label 5'],
datasets: [{
label: 'Sample Bar Chart',
data: [12, 17, 3, 8, 2],
backgroundColor: 'rgba(70, 192, 192, 0.6)',
borderColor: 'rgba(150, 100, 255, 1)',
borderWidth: 1
}]
};
// Configuration options for the chart
let options = {
scales: {
y: {
beginAtZero: true
}
}
};
// Get the canvas element
let ctx = document.getElementById('myBarChart')
.getContext('2d');
// Create the bar chart
let myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
</body>
</html>
|
Output:
Output 1
Example 2: The following code shows a bar chart with styles and different colours. They are having labels on the horizontal axis and a heights of the bars on the vertical axis.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Styled Bar Chart Example</title>
<!-- Include Chart.js from CDN -->
<script src=
</script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
canvas {
border: 2px solid #4b4949ab;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Styled Bar Chart</h2>
<!-- Create a canvas element for the chart -->
<canvas id="myStyledBarChart"
width="370"
height="160"></canvas>
<script>
// Sample data for the chart
let data = {
labels: ['Label 1', 'Label 2',
'Label 3', 'Label 4',
'Label 5'],
datasets: [{
label: 'Styled Bar Chart',
data: [12, 19, 4, 8, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.9)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.8)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 2,
borderRadius: 10,
hoverBackgroundColor: 'rgba(255, 99, 132, 0.8)',
hoverBorderColor: 'rgba(255, 99, 132, 1)'
}]
};
// Configuration options for the chart
let options = {
scales: {
y: {
beginAtZero: true
}
}
};
// Get the canvas element
let ctx = document.
getElementById('myStyledBarChart').
getContext('2d');
// Create the styled bar chart
let myStyledBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
</body>
</html>
|
Output:
Output 2