Click event for bar-chart using Highcharts not working?

Question

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

1. labelcolor of x-axis on click of particular lable on x-axis
2. 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

Answer 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