Chart.js to show cursor pointer for labels and legends in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Chart.js to show cursor pointer for labels and legends in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from w w  w. j a  v a2  s.  c  o m*/
var line_chart = new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: ['May', 'June', 'July'],
    datasets: [{
      data: [15, 25, 15],
      label: "My Dataset1",
      borderColor: "#00F",
      fill: false
    }, {
      data: [35, 15, 25],
      label: "My Dataset2",
      borderColor: "#F00",
      fill: false
    }]
  },
  options: {
    legend: {
      onHover: function(event, legendItem) {
        document.getElementById("line-chart").style.cursor = 'pointer';
      }
    },
    tooltips: {
      mode: 'label',
    },
    hover: {
      onHover: function(e, el) {
        $("#line-chart").css("cursor", el[0] ? "pointer" : "default");
      }
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <div style="width:80%"> 
         <canvas id="line-chart" width="800" height="450"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials