Chartjs to show dot point on hover over line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Chartjs to show dot point on hover over line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>ChartJS - Show Points on Hover</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*w  w w .j  a v  a2 s . c  om*/
var data = {
  labels: ["Point0", "Point1", "Point2", "Point3", "Point4"],
  datasets: [
    {
      label: "My Chart",
      fillColor: "rgba(87, 167, 134, 0.2)",
      strokeColor: "rgba(87, 167, 134, 1)",
      pointColor: "rgba(87, 167, 134, 1)",
      pointStrokeColor: "rgba(255, 255, 255, 0)",
      pointHighlightFill: "rgba(87, 167, 134, 0.7)",
      pointHighlightStroke: "rgba(87, 167, 134, 1)",
      data: [5, 39, 109, 19, 149]
    }
  ]
};
var ctx = document.getElementById("my_chart").getContext("2d");
myChart = new Chart(ctx).Line(data, {
  responsive : true,
  bezierCurve: false,
  datasetFill: true,
  pointDotRadius: 1,
  pointDotStrokeWidth: 8,
  pointHitDetectionRadius: 20,
});
    }

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

Related Tutorials