ChartJS to display legend - Javascript Chart.js

Javascript examples for Chart.js:Legend

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

Description

ChartJS to display legend

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Bar Chart Example</title> 
   </head> 
   <body translate="no"> 
      <div class="x_panel"> 
         <div class="x_title"> 
            <h2>Bar graph</h2> 
            <ul class="nav navbar-right panel_toolbox" style="padding-left:5%"> 
               <li> 
                  <a class="collapse-link">
                     <i class="fa fa-chevron-up"></i>
                  </a> 
               </li> 
               <li> 
                  <a class="close-link">
                     <i class="fa fa-close"></i>
                  </a> 
               </li> 
            </ul> 
            <div class="clearfix"></div> 
         </div> 
         <div class="x_content"> 
            <canvas id="mybarChart"></canvas> 
         </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 ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
  type: 'bar',/*from   ww w. j a v  a2 s . c om*/
  data: {
    labels: ['Votes'],
    datasets: [{
      label: '# of Votes',
      backgroundColor: "#000080",
      data: [80]
    }, {
      label: '# of Votes2',
      backgroundColor: "#d3d3d3",
      data: [90]
    }, {
      label: '# of Votes3',
      backgroundColor: "#add8e6",
      data: [45]
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: "#000080",
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
      </script>  
   </body>
</html>

Related Tutorials