bar chart

bar-chart.markdown

bar chart

using chart js

A Pen by Uriel Wilson Jr. on CodePen.

License.

index.html

<h2>Chart</h2>
<canvas id="myChart" class="datachart" height="400"></canvas>

script.js

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["2016 Q1", 
             "2016 Q2", 
             "2016 Q3", 
             "2016 Q4", 
             "2017 Q1", 
             "2017 Q2", 
             "2017 Q3",
             "2017 Q4",
             "2018 Q1",
             "2018 Q2",
             "2018 Q3",
             "2018 Q4",
             "2019 Q1",
             "2019 Q2",
             "2019 Q3",
             "2019 Q4",
            ],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(68,114,196,100)",
            strokeColor: "rgba(220,220,220,0)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40,59, 80, 81]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(237,125,49,100)",
            strokeColor: "rgba(151,187,205,0)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 100,28, 48, 40, 19, 86, 27, 100,26,48]
        },
              {
            label: "My Second dataset",
            fillColor: "rgba(165,165,165,100)",
            strokeColor: "rgba(237,125,49,0)",
            highlightFill: "rgba(237,125,49,0.75)",
            highlightStroke: "rgba(237,125,49,0)",
            data: [12, 32, 46, 11, 81, 17, 90,12, 32, 46, 11, 81, 17, 90,67,75]
        }
    ]
};



var myNewChart = new Chart(ctx).Bar(data,{
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero : true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1,

    //Boolean - If there is a stroke on each bar
    barShowStroke : true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth : 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing : 5,

    //Number - Spacing between data sets within X values
    barDatasetSpacing : 1,

    //String - A legend template
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>

style.less

.datachart{
  width:100%;
}