Access chart objects in ionic (Chart.js) returns null

1

Hello, is anyone using Chart.js with ionic and is successfully able to obtain the canvas id to handle onclick?

Graphing works fine, but in the controller, on handleClick the chart object is always returning null

I am using tc-chartjs like so:

In the graph template:

 <canvas tc-chartjs-bar chart-data="data" chart-options="options"
                                ng-click="handleChartClick($event)" chart="chart">
                        </canvas>

This draws the graph perfectly, but inside handleChartClick, when I try and access $scope.chart I get a undefined object

My handleChartClick code:

$scope.handleChartClick = function (event) {
        console.log("HERE" + JSON.stringify(event));
        console.log (JSON.stringify( $scope.chart.getBarsAtEvent(event)));
        //console.log(angular.element[0].getContext('2d'));
        //console.log (JSON.stringify( $scope.chart));

    };

This returns an error because $scope.chart is undefined

My includes and usage:

index.html:

// ionic is loaded before this 
<script src="lib/Chart.js/Chart.min.js"></script>
 <script src="lib/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script>

Thanks

2

Any solution for this? I am also stucked here.
I need the chart object so that I can get the segment which is clicked on pie chart.
Please let me know if you have any solution.

3

Yes, I solved it. I don’t know why, but this worked - I had to wrap the canvas with an explicit ng-controller like so (and this is despite the controller already being linked to the template)

<div ng-controller="zmApp.EventsGraphsCtrl">
           
                        <canvas tc-chartjs-bar chart-data="chart.data" chart-options="chart.options"
                                ng-click="handleChartClick($event)" chart="chartwithbars">
                        </canvas>

                    </div>

EventsGraphCtrl is the controller that uses tc-chart js