Chart.js Bar Chart

Last Updated : 06 Dec, 2023

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.js

Example 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.

HTML

<!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=
"https://cdn.jsdelivr.net/npm/chart.js">
    </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.

HTML

<!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=
"https://cdn.jsdelivr.net/npm/chart.js">
    </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

Suggest improvement

Chart.js Area Chart

Chart.js Bubble Chart

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Bar Chart

Syntax:

Dataset Properties:

Styling:

CDN link:

HTML

Output:

HTML

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?