javascript - How can I get the value of a bar chart label when clicked in ChartJS? - Stack Overflow

admin管理员组

文章数量:1416642

I want to get the value of the label when clicked on a bar chart in Angular JS. I have the html template:

<canvas id="bar" class="chart chart-bar" chart-data="data"
                                 chart-labels="labels" chart-legend="true"  height="350"
                                chart-series="series" chart-click="onClick"> 
</canvas>

here is my JS for the click event:

$scope.onClick = function (points, evt) {
                                console.log("Chart clicked", points, evt);
                                console.log(points);
                                if(points.length > 0){
                                    console.log("Bar chart clicked");
                                    console.log("Point", points[0].value);

                                }
                              };

What I want to do is to display the value of the label when clicked on a bar chart, more specifically I want to get the value of _model -> label. Below is a picture of what gets printed in the console.

This line: console.log("Point", points[0].value); returns undefined.

Thanks in advance!

I want to get the value of the label when clicked on a bar chart in Angular JS. I have the html template:

<canvas id="bar" class="chart chart-bar" chart-data="data"
                                 chart-labels="labels" chart-legend="true"  height="350"
                                chart-series="series" chart-click="onClick"> 
</canvas>

here is my JS for the click event:

$scope.onClick = function (points, evt) {
                                console.log("Chart clicked", points, evt);
                                console.log(points);
                                if(points.length > 0){
                                    console.log("Bar chart clicked");
                                    console.log("Point", points[0].value);

                                }
                              };

What I want to do is to display the value of the label when clicked on a bar chart, more specifically I want to get the value of _model -> label. Below is a picture of what gets printed in the console.

This line: console.log("Point", points[0].value); returns undefined.

Thanks in advance!

• javascript
• angularjs
• charts

Share Improve this question Follow edited Dec 1, 2021 at 20:06 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Sep 29, 2016 at 10:41 blaablaa 81133 gold badges1616 silver badges3232 bronze badges 2

• cant you just access points[0].label? – Sajeetharan Commented Sep 29, 2016 at 10:45
• from the console it looks like you are using this library to draw your charts: chartjs, is that correct? – Jannie Theunissen Commented Oct 3, 2019 at 15:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Try including the third variable in the $scope.onClick callback, which gets defined when you click a particular bar.

In the HTML:

<canvas id="bar" 
        ... other stuff ...
        chart-click="ctrl.onClick">
</canvas> 

In the controller:

ctrl.onClick = function(_points, _event, barClicked) {
  if (barClicked) {
    var associatedLabel = barClicked._model.datasetLabel;
    console.log("Label of the bar you clicked is " + associatedLabel);
  }
}

I was rendering multiple bars per year along the X-axis and originally used just the two callback variables, but all _points was giving me was all the chart elements within the year I clicked. The above gave me the exact bar I clicked.

I couldn't find this in the ChartJS docs, so I'm not sure if it is applicable in all cases, but it worked wonders for me. Cheers!

$scope.onClick = function (points, e, instance) {
    $scope.chart = instance._chart;
    $scope.activeElement = $scope.chart.getElementAtEvent(e);        
    console.log(points[0]._chart.data.datasets[$scope.activeElement[0]._datasetIndex].data[$scope.activeElement[0]._index] );
};

本文标签： javascriptHow can I get the value of a bar chart label when clicked in ChartJSStack Overflow