How can I hide/show a data that in a series? (highchart) - highcharts

Question

I know how to hide a whole series,but I have no idea about how to hide a specific data in a series. here is part of my option:
series: [
{
data: [
{ x: 35, y: 35, z: 50.8, name: "A" ,visible:false},
{ x: 25, y: 75, z: 50.8, name: "B" },
{ x: 45, y: 55, z: 50.8, name: "C", color: "red" }
]
}
mydemo
visible:false is half works , the background is disappeared but the datalabel is still there , I want hide it , and no user interaction.
and I want tigger hide/show on a bubble click like this:
const onClickBubble = event => {
let currentPointName = event.point.name;
console.log(chartRef.current.chart.series[0].options.data);
option.series[0].data.forEach(element => {
if (currentPointName === element.name) {
element.color = "green";
} else {
//hide other bubble here
element.visible = false;
}
});
let NewOptoin = Object.assign({}, option);
setOption(NewOptoin);
};
so this :
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
there is no series[x].points in chart option. so this way may not work for me.

Answer 1

You can hide a point in the load event:
chart: {
events: {
load: function(){
var point = this.series[0].points[0];
['graphic', 'dataLabel'].forEach(function (key) {
if (point[key]) {
point[key].hide();
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4805/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/highcharts/chart.events.load