ng-click not working with chart.js

Question

I created a pie chart with chartjs, but when I click on a specific slice, the click event is not taken.

View:

<div ng-controller="ProjectsController">
<a>Projects</a>
<br>
</br>
<canvas id="myPieChart" width="600" height="600" ng-click="chartClick()"></canvas>

Controller:

'use strict';

angular.module('Progs')

.controller('ProjectsController', ['$scope', '$rootScope', '$http', '$window', '$state',
function ($scope, $rootScope, $http, $window, $state) {
  //...
  $scope.chartClick = function (event) {
    console.log('chartClick');
    //console.log("segment: " + $scope.chart.getSegmentsAtEvent(event));
  }
  //...
}

What's wrong with my code?

Please note: I am not using angular-chart.js

there are no errors in the console, just it does react to the click event — eeadev
– eeadev, Commented Feb 1, 2016 at 12:35
Please post your whole view, it's not clear whether you've loaded Angular correctly, for example whether you've included ng-app or not. — Jim Aho
– Jim Aho, Commented Feb 9, 2016 at 11:13

Minato · Accepted Answer · 2016-02-09 06:16:29Z

9

+50

I studied your problem and be reading @MohammadMansoor's answer I tried to implement the solution for you.

(function(angular) {
  var app = angular.module("app", []);
  app.controller("ChartCtrl", ['$scope', function($scope) {
    $scope.hello = "Hello, World";
    $scope.canvas = document.getElementById("myPieChart");
    $scope.ctx = $scope.canvas.getContext("2d");
    $scope.data = [{
      value: 300,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
    }, {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
    }, {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
    }];
    $scope.myPieChart = new Chart($scope.ctx).Pie($scope.data,{});
    $scope.chartClick = function (event) {
        console.log('chartClick');
        console.log($scope.myPieChart.getSegmentsAtEvent(event));
    }
    $scope.canvas.onclick = $scope.chartClick;
  }]);
})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <h1>{{hello}}</h1>
  <a>Projects</a>
  <br>
  <canvas id="myPieChart" width="600" height="600"></canvas>
</div>

here is the plunk for the same implementation

answered Feb 9, 2016 at 6:16

Minato

4,5431 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abderrahim Over a year ago

can you please see my question stackoverflow.com/questions/37256487/…

Mohammed mansoor · Accepted Answer · 2016-02-04 04:26:38Z

5

Use html onclick feature and access the scope using any id

Example:

<canvas id="myPieChart" width="600" height="600" onclick="angular.element("#myPieChart").scope().chartClick();"></canvas>

answered Feb 4, 2016 at 4:26

Mohammed mansoor

8293 gold badges13 silver badges18 bronze badges

4 Comments

eeadev Over a year ago

how do u get for instance the label of the slice in such case?

eeadev Over a year ago

when I click on each slice of myPieChart, how do I get (in my controller) a reference to the slice I have clicked? If, for instance, I want to get some value of data, having data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }...,

Mohammed mansoor Over a year ago

You can pass parameters like angular.element("#myPieChart").scope().chartClick('test_arg'); and inside angular fucntion you may get it as normal.Try without single quotes also if it is ot working

eeadev Over a year ago

please could u edit your response adding also the function to use inside the controller? many thanks

Minato · Accepted Answer · 2016-02-01 12:00:46Z

3

If you are using angular-chart please use chart-click = "chartClick".

I guess the chart.js overrides the click event and doesn't pass it on to angular, so you can't get a ng-click event triggered.

You could try binding the click event externally using angular.element('#myPieChart') but I am not sure about it.

answered Feb 1, 2016 at 12:00

Minato

4,5431 gold badge25 silver badges30 bronze badges

1 Comment

Minato Over a year ago

You should use it.. it has very handy features... and its a wrapper around chart.js

Collectives™ on Stack Overflow

ng-click not working with chart.js

3 Answers 3

here is the plunk for the same implementation

1 Comment

Example:

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

here is the plunk for the same implementation

1 Comment

Example:

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related