0

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.

jjzjx118_2
  • 419
  • 7
  • 23

1 Answers1

0

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • thanks for your answer, I want trigger hide/show on click bubble. like this:`const onClickBubble = event => { chartConfig.series[0].data.forEach(element => { // console.log(element.name) if (element.name != event.point.name) { console.log('hide:',element.name) // element.dataLabels.enabled = false; // element.color = "#B94E3D00"; element.visible = false; }else{ // console.log('show:',element.name) // element.dataLabels.enabled = true; // element.color = "#B94E3D"; } }); – jjzjx118_2 Feb 04 '20 at 01:54
  • Hi @jjzjx118_2, You need to get the chart reference and call the function on a series point. – ppotaczek Feb 04 '20 at 11:54