Open In App

Chart.js Bar Chart

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

bar1
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:

bar2
Output 2

Next Article
Chart.js Bubble Chart

S
strikeackr
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox