get handle of clicked datapoint in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

get handle of clicked datapoint in line chart

Demo Code

ResultView the demo in separate window 

<!--//from   w  w  w . j ava2  s .  c om
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <meta name="viewport" content="width=device-width"> 
      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script> 
   </head> 
   <body onload="displayLineChart();"> 
      <div class="box"> 
         <canvas id="lineChart" height="450" width="800"></canvas> 
      </div> 
      <script>
function displayLineChart() {
    var data = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
            {
                label: "Prime and Fibonacci",
                fill: false,
                borderColor: "green",
                pointColor: "white",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [12, 13, 15, 17, 111, 113, 117, 9, 3, 0]
            },
            {
                label: "My Second dataset",
                fill: false,
                borderColor: "red",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
            }
        ]
    };
   var ctx = document.getElementById('lineChart');
    var options = {};
    var lineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
               responsive: true
            }
   });
    ctx.onclick = function(evt) {
      var activePoints = lineChart.getElementsAtEvent(evt);
        if (activePoints.length) {
          var mouse_position = Chart.helpers.getRelativePosition(evt, lineChart.chart);
          activePoints = $.grep(activePoints, function(activePoint, index) {
            var leftX = activePoint._model.x - 5,
                rightX = activePoint._model.x + 5,
                topY = activePoint._model.y + 5,
                bottomY = activePoint._model.y - 5;
            return mouse_position.x >= leftX && mouse_position.x <=rightX && mouse_position.y >= bottomY && mouse_position.y <= topY;
          });
          console.log(activePoints[0]._datasetIndex);
        }
   };
}

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

Related Tutorials