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

i'm trying open model using chart data. have tried many ways didn't find proper solution.

i want to:

1. click on data inside chart
2. once clicked, should open pop-up model

my angular

    app.controller('myctrlpercent', ['$scope', '$http', function ($scope, $http) {             $scope.labelspercent = ['equipment 1', 'equipment 2', 'equipment 3', 'equipment 4']; //        $scope.series = ['hello'];         $scope.chartoptionspercent = {             title: {                 display: true,                 text: "downtime percentage of equipment",                 fontsize: 20             },             legend: {                 text: "hello"             },             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]; }]); 

my html

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 searchtable">          <div id="chartstyle">             <canvas class="chart chart-bar" chart-data="datapercent" chart-labels="labelspercent" chart-options="chartoptionspercent" data-ng-click="myfunction()"></canvas>         </div>         <br>     </div> 

you can use onclick method of chart.

called if event of type 'mouseup' or 'click'. called in context of chart , passed event , 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 , return if not clicked on bar/data           // else...           alert('clicked on bar!'); // 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>