Change xAxis label style on data series click, Highcharts/React - reactjs

Question

I am trying to achieve a behavior in simple column chart in React, where I can click on series point and have xAxis label change style. Also, when you click again, that style should be removed. It is the same behavior as we have for mouse over and mouse out but for click event. I can get it to work with mouse events, but not click event.
Is this possible to achieve? This is a code sample I have.

Answer 1

Do the following:
Maintain a state say current update its value with the current axis number upon onClick
Define x-Axis and labels in your config-options
Use formatter function inside label. This function provides current axis value as argument. use it and compare it with your current state and adjust the style dynamically.
Working copy of code sample is here
Code Snippet
class App extends React.Component {
state = {
current: "black"
};
options = {
tooltip: {
enabled: false
},
xAxis: {
labels: {
formatter: item => {
const color = this.state.current === item.value ? "red" : "black";
const fontWeight =
this.state.current === item.value ? "bold" : "normal";
return `<span style="color: ${color}; font-weight: ${fontWeight}">${
item.value
}</span>`;
}
}
},
series: [
{
data: [1, 2, 3, 4],
type: "column",
colors: ["#000000"],
cursor: "pointer",
point: {
events: {
click: (e, x, y) => {
this.setState({ current: e.point.x });
console.log(e.target, e.point.x);
}
// mouseOver: function(e) {
// $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css({fontWeight: 'bold'});
// },
// mouseOut: function() {
// $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css({fontWeight: 'normal'});
// }
}
}
}
]
};
render() {
return (
<div>
<h2>Highcharts</h2>
<ReactHighcharts config={this.options} />
</div>
);
}
}

Answer 2

Just use the click event function to change the label CSS style. For example:
series: [{
...,
point: {
events: {
click: function() {
var ticks = this.series.xAxis.ticks,
label,
fontWeight;
if (ticks[this.x]) {
label = ticks[this.x].label;
fontWeight = (
label.styles.fontWeight && label.styles.fontWeight === 'bold'
) ? 'normal' : 'bold';
ticks[this.x].label.css({
'fontWeight': fontWeight
});
}
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4991/
API Reference:
https://api.highcharts.com/highcharts/series.column.events.click
https://api.highcharts.com/class-reference/Highcharts.SVGElement#css