Chartjs-How do I trigger a clickable event on my chart data

by

4👍

✅

You can use the onClick method of chart.

Called if the event is of type ‘mouseup’ or ‘click’. Called in the
context of the chart and passed the event and an array of active
elements

DEMO

var app = angular.module('app', ['chart.js']);

app.controller("BarCtrl", function($scope) {
   $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
   $scope.data = [
      [3, 2, 5, 1, 4, 2]
   ];
   $scope.options = {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      onClick: function(event, elem) {
         var elem = elem[0];
         if (!elem) return; // check and return if not clicked on bar/data
         // else...
         alert('clicked on bar!'); // just for test
         // modal opening code goes here...
      }
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="BarCtrl">
   <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-options="options"></canvas>
</div>

3👍

You can add chart-click="onClick" event and configure the event under chart options,

HTML

<canvas class="chart chart-bar"  chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent" data-ng-click="myFunction()"></canvas>

Controller:

 onClick: (point, elements) => {
      alert('open Modal');
    },

DEMO

angular.module("app", ["chart.js"])


.controller("ChartCtrl", function($scope) {
  $scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
  $scope.chartOptionsPercent = {
    title: {
      display: true,
      text: "Downtime Percentage of Equipment",
      fontSize: 20
    },
    legend: {
      text: "Hello"
    },
    tooltips: {
      enabled: false
    },
    onClick: (point, elements) => {
     var chartele= elements[0];
     if (!chartele)
     {
         return;
     }
     else{        
         alert('open modal!');
      }
    },
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        position: 'left',
        ticks: {
          min: 0,
          max: 100
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Name of Equipment'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Percentage of Downtime (%)'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }]
    }
  }
  $scope.dataPercent = [5, 6, 7, 12];


});
<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent"  ></canvas>
  </div>
 </body>
</html>

Leave a comment