Pie chart legend setting - Javascript Chart.js

Javascript examples for Chart.js:Legend

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

Description

Pie chart legend setting

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Change Chart.js plugin</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="http://getfirebug.com/firebug-lite-debug.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
var chartColors = {/* ww  w . j av a 2 s . c om*/
  red: 'rgb(255, 99, 132)',
  blue: 'rgb(54, 162, 235)'
};
var myChart = new Chart(document.getElementById("myChart"), {
  type: 'pie',
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: ["Label 1", "Label 2"],
    datasets: [{
      backgroundColor: [chartColors.red, chartColors.blue],
      data: [4, 7],
      hoverBorderWidth: 5,
      borderColor: 'transparent',
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Chart Title',
    },
    legend: {
      display: true,
      position: 'bottom',
      fullWidth: false,
      onClick: () => {},
      labels: {
      }
    },
    rotation: 3.9,
  },
  plugins: [{
    beforeInit: function(chart, options) {
      console.log('yolo');
    }
  }]
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="150"></canvas>  
   </body>
</html>

Related Tutorials