Chart.js legend style for bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Chart.js legend style for bar chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Custom Legend</title> 
      <style>

li {/*w  w  w  .j  av a2  s  .  c  o  m*/
   list-style-type: none;
}
.label {
   margin-left: 15px;
   font-family: 'Source Sans Pro', sans-serif;
   color: #666666;
   font-size: 14px;
}
.legendValue {
   float: left;
   height: 25px;
}
.clear {
   clear: both
}


      </style> 
   </head> 
   <body translate="no"> 
      <div style="width:25%;"> 
         <canvas id="mybarChart"></canvas> 
         <div id="legend"></div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var data = {
  labels: ['label'],
  datasets: [{
    label: 'Disk C',
    backgroundColor: "#000080",
    data: [80]
  }, {
    label: 'Disk D',
    backgroundColor: "#d3d3d3",
    data: [90]
  }, {
    label: 'Memory',
    backgroundColor: "#add8e6",
    data: [45]
  }]
};
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
  type: 'bar',
  responsive: true,
  data: data,
  options: {
    legend: {
      display: false,
      position: 'bottom'
    },
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      for (var i = 0; i < chart.data.datasets.length; i++) {
        text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">&nbsp;&nbsp;&nbsp;&nbsp;</span>');
        if (chart.data.datasets[i].label) {
          text.push('<span class="label">' + chart.data.datasets[i].label + '</span>');
        }
        text.push('</div></li><div class="clear"></div>');
      }
      text.push('</ul>');
      return text.join('');
    },
    scales: {
      yAxes: [{
        display: false,
        ticks: {
          beginAtZero: true
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }],
      xAxes: [{
        display: false,
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        },
        barPercentage: 0.5,
        categoryPercentage: 0.5
      }]
    }
  }
});
$('#legend').prepend(mybarChart.generateLegend());
   
      </script>  
   </body>
</html>

Related Tutorials