Canvas chart created using chartjs - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Canvas chart created using chartjs

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Get canvas data attribute - For SO question #45716104</title> 
      <style>

.pie-chart-canvas-wrapper{//from  ww  w.ja v a2 s  .  co m
   box-sizing:border-box;
   width:500px;
   height:300px;
   float:left;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div id="pie-charts-whole-wrapper"> 
         <div class="pie-chart-canvas-wrapper"> 
            <canvas data-region="RO1" data-role="sales" width="500px" height="300px" id="pie1"></canvas> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
      <script>
      var ctx1 = document.getElementById("pie1");
var pieChart1 = new Chart(ctx1, {
  type: 'pie',
  data: {
    labels: ["signed", "Not Signed"],
    datasets: [
      {
        data: [20, 50],
        backgroundColor:['#2ecc71','#34495e']
      }
    ]
  }
});
ctx1.onclick = function(evt) {
  var activePoints = pieChart1.getElementsAtEvent(evt);
  if (activePoints[0]) {
    var chartData = activePoints[0]['_chart'].config.data;
    var idx = activePoints[0]['_index'];
    var label = chartData.labels[idx];
    var value = chartData.datasets[0].data[idx];
    console.log(label);
    console.log(value);
    console.log(this.getAttribute("data-role"));
  }
};
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials