Add Labels to Chart.js Bar Chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Add Labels to Chart.js Bar Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Doughnut Chart in chart.js</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-compat-git.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

html, body {
   height: 100%;
   width: 100%;
}
#myChart {/*from   w  ww. j a  va  2s.  c o  m*/
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
}


      </style> 
      <script type="text/javascript">
    $(window).on('load', function() {
var data = {
  labels: [
   "label1",
   "label2",
   "label3",
   "label4",
   "label5"
   ],
  datasets: [
   {
    data: [
     31,
     51,
     110,
     41,
     110
    ],
    backgroundColor:[
     '#F7464A',
     '#E2EAE9',
     '#D4CCC5',
     '#949FB1',
     '#4D5360'
    ]
   }]
};
var options = {
};
var ctx = document.getElementById("myChart")
                           .getContext("2d");
var myNewChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});
    });

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

Related Tutorials