Chartjs-How to show labels of dataset using chart.js

by

0👍

I assume you want a chart legend to be displayed at the bottom of the graph with the given labels. You can try adding this to your code.

<style type = "text/css">

.chart-legend li {
list-style-type: none;
padding-top: 10px;

}

.chart-legend li span { 
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;

} 
</style>

 <div id="sample" class="chart-legend">
 </div>

 <script>
 var data = {
 labels: ["January", "February", "March", "April", "May", "June", "July"],
 datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
};




var ctx = document.getElementById("barchart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);
document.getElementById('sample').innerHTML = myBarChart.generateLegend();

}

</script>

Leave a comment