Bar chart
Bar Chart

Html Code:

<!DOCTYPE html>

<html lang = "en">

<head>

<meta charset = "UTF-8">

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

<meta http-equiv = "X-UA-Compatible" content = "ie=edge">

<meta name = "Description" content = "Enter your description here"/>

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.0/slate/bootstrap.min.css">

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<title>Bar Chart</title>

<style>

    canvas{

        max-width : 100%;

        min-height : 500px;

        max-height : 500px;

    }

</style>

</head>

<body>

    <div class = "card mb-1">

        <div class = "card-body">

            <h4 class = "card-title">Bar Chart</h4>

        </div>

    </div>

    <div class = "card">

        <div class = "card-body">

            <canvas id = "bar_chart"></canvas>

        </div>

    </div>

</body>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"> </script>

<script src = "../../chart.js/dist/chart.min.js"> </script>

<script src = "../../Css/background_color.js"> </script>

<script src = "bar chart.js"></script>

</html>

JavaScript

var bar_chart = document.getElementById('bar_chart');

var dataset = {

    label: '# of Votes',

    data: [12, 19, 3, 5, 2, 3],

    backgroundColor: BGC,

    borderColor: BG_19CX7I,

    borderWidth: 1

}

var data =

{

    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

    datasets: [dataset]

}

var option =

{

    scales:

    {

        y:

        {

            beginAtZero: true

        }

    }

}

var barchart = new Chart(bar_chart,

    {

        //chart type

        type: 'bar',

        //assign Data

        data: data,

        //chart style

        options: option

    }

);

 

Bar chart