Question

147

How to add OnClick Event on labels in Chart.js v2.0?

rated 0 times [ 148] [ 1] / answers: 1 / hits: 29562 / 8 Years ago, wed, may 4, 2016, 12:00:00

Looking For a method to add onClick handle on the label element in chartjs 2.0
As using below method will return undifined in console.log whenever clicking on any one of the label attributes in Char.js V2.0 RadarChart.

var data = {

    // below line is the labels 

    labels: [Eating, Drinking, Sleeping, Designing, Coding, Cycling, Running],

    datasets: [

        {

            label: My First dataset, //this only shows as legend, not label.



            backgroundColor: rgba(179,181,198,0.2),

            borderColor: rgba(179,181,198,1),

            pointBackgroundColor: rgba(179,181,198,1),

            pointBorderColor: #fff,

            pointHoverBackgroundColor: #fff,

            pointHoverBorderColor: rgba(179,181,198,1),

            data: [65, 59, 90, 81, 56, 55, 40]

        },

       ....

//Below is how to OnClick on chart points in chart.js V2, 

//However, it didn't apply to labels, will return undifined .   

$('#ChartV2').click(function(e) {

                var activePoints = myRadarChart.getElementsAtEvent(e);                  

                var firstPoint = activePoints[0];

                console.log(firstPoint);

                if (firstPoint !== undefined){

                   alert(firstPoint._index);                        

                }

 });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austenjordang

Add To Favorites

Follow

Total Points: 544

Total Questions: 112

Total Answers: 112

Location: Monaco

Member since Sun, Jan 16, 2022

2 Years ago

answered 8 Years ago tristab · Accepted Answer

getElementsAtEvent checks only the main elements of the chart (bars, points, sectors...). If you want to consider labels too, you'll have to reimplement the functionality for labels.

Most of the code you need is already available in different methods in the Chart.js library code. Just copy-paste / cleanup as done below.

Script

Your click hander should be

$('#myChart').click(function (e) {

    var helpers = Chart.helpers;



    var eventPosition = helpers.getRelativePosition(e, myRadarChart.chart);

    var mouseX = eventPosition.x;

    var mouseY = eventPosition.y;



    var activePoints = [];

    // loop through all the labels

    helpers.each(myRadarChart.scale.ticks, function (label, index) {

        for (var i = this.getValueCount() - 1; i >= 0; i--) {

            // here we effectively get the bounding box for each label

            var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);



            var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);

            var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);

            var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);

            var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);

            ctx.font = pointLabeFont;



            var labelsCount = this.pointLabels.length,

                halfLabelsCount = this.pointLabels.length / 2,

                quarterLabelsCount = halfLabelsCount / 2,

                upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),

                exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);

            var width = ctx.measureText(this.pointLabels[i]).width;

            var height = pointLabelFontSize;



            var x, y;



            if (i === 0 || i === halfLabelsCount)

                x = pointLabelPosition.x - width / 2;

            else if (i < halfLabelsCount)

                x = pointLabelPosition.x;

            else

                x = pointLabelPosition.x - width;



            if (exactQuarter)

                y = pointLabelPosition.y - height / 2;

            else if (upperHalf)

                y = pointLabelPosition.y - height;

            else

                y = pointLabelPosition.y



            // check if the click was within the bounding box

            if ((mouseY >= y && mouseY <= y + height) && (mouseX >= x && mouseX <= x + width))

                activePoints.push({ index: i, label: this.pointLabels[i] });

        }

    }, myRadarChart.scale);



    var firstPoint = activePoints[0];

    if (firstPoint !== undefined) {

        alert(firstPoint.index + ': ' + firstPoint.label);

    }

});

Fiddle - http://jsfiddle.net/1Lngmtz7/