Hightlight x-axis label in Highcharts

I have a bar graph in Highcharts and I need to highlight the x-axis label of one of the bar graphs based on an event that is fired. Note that this event is NOT the click inside the Highcharts graph but an event that is triggered from the outside.

So far I have managed to get the index of the bar graph that is clicked by doing something like this once the event I am subscribed to is fired

 var index = <HighchartsPointObject>this.chart.get('some very unique identifier').category;

But I have not yet found a way to actually manually highlight (as in change the CSS color style) of the label at the corresponding index.

Note that I've also tried using the formatter() inside the options object in a way that is similar to this :

formatter(this: { value: string }) {
    var someStaticReference = storedValueFromFiredEvent // get the information I need from that event
        if (someStaticReference.name === this.value) {
            return '<span style="color:#0095d3;">' + this.value + '</span>';
           } else {
               return this.value
           }
}

But this does not also do work for me as different bars might have the same names. So I need something based off the index of the bar I need to highlight.


ANSWERS:


You can access a label object from a tick object. And then modify it with css() method.

document.getElementById('btn').onclick = function () {
  const tick = chart.get('x-axis-1').ticks[4];
  tick.label.css({
    backgroundColor: 'red',
    color: 'white'
  });
}

The labels by default are text and they do not response for some styles like background-color, so to have ability to change those css, you should se useHTML to true for axis labels.

  xAxis: {
    id: 'x-axis-1',
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
      useHTML: true
    }
  },

example:



 MORE:


 ? Import vue module from another vue module in typescript
 ? "as" notation with TypeScript, need to export a namespace?
 ? Namespace is defined despite never being imported
 ? ko.observableArray is not accepting an array in TypeScript that is an array type
 ? Describe property object in TypeScript interface
 ? Typescript 2 frozen object of any shape behavior
 ? how to parse html input value to json data at angular2 using typeScript
 ? How to stop javascript ++ or - - condition
 ? Creating a function signature that removes null from a union type
 ? Pass function from Parent to Child component in Angular 2