chart.js chart-click pass parameter in Angular controller

Question

I'm using chart.js/angular-chart.js to display some data in pie charts.

I need functionality where when a user will click on a label within the chart pie the click event will copy over the selected chart value.

I'm able to trigger the event by this action:

$scope.chartClick = function() {
               alert('ok');
           }

And this is the markup I have:

 <canvas id="pie" class="chart chart-pie"
                  chart-data="data" chart-labels="labels" display="true" chart-click="chartClick()" chart-options="options"></canvas>

Any idea how I can pass some parameter to that event to actually get the value?

Edit

Full controller:

.controller('InvestorLtvReportController', [
    '$scope', '$http', '$state', function ($scope, $http, $state) {
        $scope.labels = [];
        $scope.data = [];
        $scope.options = {
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        };

        $scope.chartClick = function (points, evt) {
            console.log(points, evt);
        };

        $http({
                url: 'http://myapi/api/Manage/GetUserRole',
                method: "GET"
            }).success(function (data, status) {
                $scope.isInvestor = false;
                angular.forEach(data, function (value, key) {
                    if (value == 'Investor') {
                        $scope.isInvestor = true;
                    }
                });

                if (!$scope.isInvestor) {
                    $state.go('accountlogin');
                } else {
                    $http({
                        url: 'http://myapi/api/investor/GetInvestorLtvReport',
                        method: "GET"
                    }).success(function (data, status) {

                        angular.forEach(data, function (value, key) {
                            $scope.labels.push(value.Amortisation);
                            $scope.data.push(value.PercOfFund);
                        });
                    }).error(function (data, status) {
                        console.log(data);
                    });
                }
            })
    }
])

Sajeetharan · Accepted Answer · 2016-10-31 19:49:37Z

3

You can do this,

<canvas id="pie" chart-click="onClick" class="chart chart-pie"chart-data="data" chart-labels="labels"></canvas>

Controller:

app.controller('AppCtrl', ['$scope', function($scope){
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
   $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
}]);

DEMO

answered Oct 31, 2016 at 19:49

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

8 Comments

Laziale Over a year ago

Hi @sajeetharan thx for your help, I'm getting undefined undefined although I have labels as you can see from the screenshots i.gyazo.com/946c26eea34b0c027f78426864547607.png

Sajeetharan Over a year ago

@Laziale did you check the demo i attached?

Laziale Over a year ago

I see that it works fine thx, I'm getting the labels dynamically, do you think that might make a difference?

Sajeetharan Over a year ago

if you have the data in chart, it should work either way. Mark as answer if it has helped

Laziale Over a year ago

I just updated my question with full controller code, can you pls check and let me know if I'm missing something, Thanks

|

Rodrigo Del Angel Hurtado · Accepted Answer · 2018-09-28 13:06:25Z

2

A solution that worked for me to get the data when you click on a bar is the following

$scope.clickBar = (points, evt, element) => {
    if (element != undefined) {
        console.log(points,evt,element);
    }
};

answered Sep 28, 2018 at 13:06

Rodrigo Del Angel Hurtado

1771 silver badge4 bronze badges

Comments

TehEbil · Accepted Answer · 2018-08-09 17:40:37Z

1

If you still need help with that, for the recent version, you get the label with:

$scope.onClick = function (points, evt) {
    console.log(points[0]._view.label);
}

answered Aug 9, 2018 at 17:40

TehEbil

886 bronze badges

Collectives™ on Stack Overflow

chart.js chart-click pass parameter in Angular controller

Edit

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related