AngularJS/ChartJS: Get the current series

Question

I am currently using Angular Chart (http://jtblin.github.io/angular-chart.js/)

I need to find the current dataset/series Index.

In my angular controller:

$scope.mainChart.series = ['Past year', 'Current year'];
$scope.mainChart.data = [
    [10, 20, 30, 40], // 2015 - Index 0
    [50, 60, 70, 80]  // 2016 - Index 1
];

In the points array exists the property _datasetIndex. My onClick function is:

$scope.mainChart.onClick = function (points, event) {
    $log.log( points[0]._datasetIndex ); // 0
    $log.log( points[1]._datasetIndex ); // 1
};

How can I get the current series index that are clicked?

My canvas element is:

<canvas id="line" class="chart chart-line" chart-data="mainChart.data" chart-labels="mainChart.labels" chart-click="mainChart.onClick" chart-series="mainChart.series" chart-options="mainChart.options" chart-y-axes="mainChart.multiAxis" chart-legend="true" height="270"></canvas>

Answer 1

Lenin Meza: Your answer helped me.

Herewith I have posted shortcut/alternate way of fetching label and series.

$scope.mainChart.onClick = function (points, event) {
    // Get current chart
    var chart = points[0]._chart.controller;
    var activePoint = chart.getElementAtEvent(event);
    if (activePoint.length > 0) {
        // Get current Dataset
        var model = activePoint[0]._model;
        // Get current serie by dataset index
        var series =  model.datasetLabel;
        //get the internal index of slice in pie chart
        var clickedElementindex = activePoints[0]["_index"];
        //get specific label by index 
        var label = model.label;
        //get value by index      
        var value = chart.data.datasets[dataset].data[clickedElementindex];
    }
};

Answer 2

Angular-Chart is wrapped around AngularJS+Chart.js. According to Chart.js you have this http://www.chartjs.org/docs/#advanced-usage-prototype-methods ..getElementsAtEvent(e) if you could find the Chart instance.

Otherwise, if you are running out of time you can do the following.

First you need to distinguish all the points, so there are no points that have the same (label & series index & data set index).

function induceIndex(point){
//FIND the INDEX of the SET
var dataSetIndex= $scope.mainChart.series.findIndex(sElem=>sElem === point.dataSetLabel); 
//GET the SET itself
var dataSet = $scope.mainChart.data[seriesIndex]; 
//FIND the POINT in the DATASET asserting that it is at the same INDEX of its LABEL
var pointIndex = dataset.findIndex((dElem,index)=>dElem=== point.value && $scope.mainChart.labels[index] === point.label);
//do what you want
return pointIndex;
}

Answer 3

I have multiple Charts in my Dashboard and i resolve this with this code:

$scope.mainChart.onClick = function (points, event) {
    // Get current chart
    var chart = points[0]._chart.controller;
    var activePoint = chart.getElementAtEvent(event);
    if (activePoint.length > 0) {
        // Get current Dataset
        var dataset = activePoint[0]._datasetIndex;
        // Get current serie by dataset index
        var serie = $scope.mainChart.series[dataset];
        //get the internal index of slice in pie chart
        var clickedElementindex = activePoints[0]["_index"];
        //get specific label by index 
        var label = chart.data.labels[clickedElementindex];
        //get value by index      
        var value = chart.data.datasets[dataset].data[clickedElementindex];
    }
};