Bar Chart chartjs

multiple bar chart

by Osama Qassar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="600" height="250"  ></canvas>

JavaScript

var clrs = [
            "#eba556",
            "#7c81e5",
            "#87e089",
            "#7bb3eb",
            "#7a6f8d",
            "#ce4472",
            "#4c7494",
            "#b085b6",
            "#6c4c8c",
            "#eba556",
            "#7c81e5",
            "#87e089",
            "#7bb3eb",
            "#7a6f8d",
            "#ce4472",
            "#4c7494",
            "#b085b6",
            "#6c4c8c"
          ];
var type = 'bar'
var aaa = {
    type: type,
    data: {
      "labels": [
        "2021-08-04",
        "2021-08-05",
        "2021-08-06",
        "2021-08-07",
        "2021-08-08",
        "2021-08-09",
        "2021-08-10",
        "2021-08-11",
        "2021-08-12",
        "2021-08-13",
        "2021-08-16",
        "2021-08-17",
        "2021-08-18",
        "2021-08-19",
        "2021-08-23"
      ],
      "backgroundColor": "#fff",
      "datasets": [
        {
          "label": "results",
          "data": [
            8065,
            16000,
            15725,
            9302,
            20807,
            19412,
            30165,
            27608,
            0,
            10000,
            9143,
            333,
            3887,
            5643,
            22
          ],
          "borderColor": "#7a6f8d",
          "backgroundColor": clrs
        }
      ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        title: {
            display: true,
            text: 'Nishi IT Institute'
        },
        responsive: true,
        legend: {
            labels: {
                // This more specific font property overrides the global property
                /* fontColor: 'red', */
               
            }
        }
    }
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, aaa);