Click event for bar-chart using Highcharts not working?

Question

As part of my Highchart POC I am trying to achive change a

labelcolor of x-axis on click of particular lable on x-axis
want to read the current x-axis lable and y-axis data

but click event only not firing,, on load I achievd the lable color, but I am tring to do it on same thing on click event

https://stackblitz.com/edit/highcharts-angular-demo-t8pmf4?embed=1&file=src/app/app.component.ts

Can any one can help me or suggest me

As per solution provided below I acheived 50% https://stackblitz.com/edit/highcharts-angular-demo-z84bav?embed=1&file=src/app/app.component.ts

but how to change label color ??

Thanks in advance

score 1 · Answer 1 · answered Oct 29 '20 at 11:56

1

events should be inside the labels object, now your click handler will trigger.

xAxis: {
        categories: ["4-10/10", "11-17/10", "18-24/10", "25-31/10"],
        labels: {
          formatter: function() {
            if ("18-24/10" === this.value) {
              return '<span style="fill: red;">' + this.value + "</span>";
            } else {
              return this.value;
            }
          },
          events: {
             click: function() {
            console.log("click");
           }
          }
        },

answered Oct 29 '20 at 11:56

Sarun UK

6,210
7
23
48

Ha it's working ,, here in this click event how to get x-axis current label data , y-axis data , How to to format label color – Soumya Gangamwar Oct 29 '20 at 12:03
console.log(this.value); getting x-axis data is it possible to read the bar y-axis pint ? – Soumya Gangamwar Oct 29 '20 at 12:10

score 1 · Accepted Answer · answered Oct 29 '20 at 17:11

1

To add the click event and change the color in the event use the below code:

    xAxis: {
        ...,
        labels: {
            ...,
            events: {
                click: function() {
                    this.axis.ticks[this.pos].label.css({
                        color: 'red'
                    });
                }
            }
        }
    }

Live example: http://jsfiddle.net/BlackLabel/1nyk6c5b/

Docs: https://www.highcharts.com/plugin-registry/single/15/Custom-Events

answered Oct 29 '20 at 17:11

ppotaczek

36,341
2
14
24

Yes , but I want to show only selected label as red color, remaing labels should be in default color,, in that case how to get remaing labels – Soumya Gangamwar Oct 30 '20 at 05:03
Hi @Soumya Gangamwar, Ok - please check this example: http://jsfiddle.net/BlackLabel/hp3wxdb4/ – ppotaczek Oct 30 '20 at 08:34
How to add image on x-axis for selectable bar ? – Soumya Gangamwar Nov 08 '20 at 09:08
Hi @Soumya Gangamwar, I have already answered you here: https://stackoverflow.com/questions/64736398/how-to-add-icon-svg-image-on-x-axis-for-bar-graph-onclick-event-using-highcharts – ppotaczek Nov 09 '20 at 12:55

score 0 · Answer 3 · answered Jan 04 '23 at 07:43

Use this logic to do that,

chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
    label.style.cursor = "pointer";
    label.onclick = function(){
      alert('You clicked on '+this.textContent);
    }
});

This example contains Label as well as Bar click: http://jsfiddle.net/m4b0eozd/

Click event for bar-chart using Highcharts not working?

3 Answers3