In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph.
Currently, I have been able to retrieve the index of the clicked bar by utilizing the following code snippet when the subscribed event is fired:
var index = <HighchartsPointObject>this.chart.get('some very unique identifier').category;
However, I am struggling to find a method to manually change the CSS style (such as color) of the corresponding label at that index.
I've also attempted using the formatter() function within the options object, similar to this approach:
formatter(this: { value: string }) {
var someStaticReference = storedValueFromFiredEvent // retrieving necessary information from the event
if (someStaticReference.name === this.value) {
return '<span style="color:#0095d3;">' + this.value + '</span>';
} else {
return this.value
}
}
Unfortunately, this method does not suit my needs as multiple bars may share the same name. Therefore, I require a solution based on highlighting the label using the index of the desired bar.