Chart.js mouseover event handler - Javascript Chart.js

Javascript examples for Chart.js:Event

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

Description

Chart.js mouseover event handler

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js line 2.0</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
   </head> 
   <body> 
      <canvas id="canvasChart" width="400" height="250"></canvas> 
      <input id="addButton" type="button" value="Add Data"> 
      <script type="text/javascript">
var charts = [];/*from   www. ja va  2  s .c  o  m*/
var chartsParams = {
  'myChart': {
    type: 'bar',
    data: {
      labels: ["Trimester 1", "Trimester 2", "Trimester 3", "Trimester 4"],
      datasets: [{
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)'],
          hoverBackgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(255, 99, 132, 0.5)', 'rgba(255, 99, 132, 0.5)', 'rgba(255, 99, 132, 0.5)'],
          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)'],
          type: 'bar',
          label: 'Queries',
          data: [33, 22, 11, 44],
          options: {
            tension: 0.0,
            bezierCurve: false
          },
          borderWidth: 1,
          tension: 0.25
        }
      ]
    },
    options: {
      tension: 1,
      scaleBeginAtZero: true,
      scaleStartValue: 0,
      scales: {
        xAxes: [{
          categorySpacing: 20,
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
          },
        }],
        yAxes: [{
          categorySpacing: 20,
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }
};
var canvas = document.getElementById("canvasChart");
var $chart;
function createChart(ID) {
  console.log(canvas);
  console.log(chartsParams);
  $chart = new Chart(canvas, chartsParams['myChart']);
}
function addData() {
  $chart.data.datasets.push({
    label: 'Added',
    data: [12, 32, 43, 53]
  });
  $chart.update();
}
createChart();
document.getElementById("addButton").addEventListener("click", addData);

      </script>  
   </body>
</html>

Related Tutorials