CODEWITHSUNDEEP
javascriptchartshighchartsfrontend
pedrodotnet
pedrodotnet

Reputation: 818

HighCharts - Disable Mouse Over when a Point is selected

I have the following two charts:

enter image description here

The line chart is configured like this: 

highcharts = Highcharts;
  chartOptions = {
    chart: {
       type: "line"
       },
    credits: {
      enabled: false
    },
    title: {
      enabled: true,
      text: "Reach +1/" + this.xAxis.name,
      verticalAlign: "top",
      align: "left"
    },
    tooltip: {
      formatter: function (data) {
          return data.chart.userOptions.xAxis.title.text + ": " + this.x.toFixed(4) + "<br/>" +
              "Reach: " + this.y.toFixed(4);
      }
  },
    xAxis: {
      title: {
        text: this.xAxis.name
      },
    },
    yAxis: {
       title: {
          text: "Reach"
       }
    },
    series: [
      {
        name: this.xAxis.name,
        data: null,
        allowPointSelect: true,
        point: {
          events: {
            click(event) {
              const point = this;
              console.log(point.selected);
              const selected = (point.selected === true) ? false : true;
              point.series.points.forEach(p => {
                p.update({
                  marker: {
                    enabled: false
                  }
                }, false);
              });
              if (selected === false) {
                point.update({
                  marker: {
                    enabled: false
                  }
                });
              } else {
                point.update({
                marker: {
                  enabled: true
                }
              });
              }
            },
            mouseOver: function(event)  {
              this.filterOptimizationResults(event.target.x, event.target.y);
            }.bind(this)
          }
        }
      }
      ]
    };

When hover on any point it triggers a function to update the pie chart on the right.

On the line chart I can also click a point to focus on it.

What I'm trying to do is that when I click on any point at the line chart disable the MouseOver function so the pie chart is not updated until I unselect the selected point.

Any suggestions?

Upvotes: 0

Views: 470

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can conditionally run some code in the mouseOver function, for example:

series: [{
  ...,
  point: {
    events: {
      mouseOver: function(){
        if (!this.series.points.filter((p) => p.selected).length) {

          // do something
        }
      }
    }
  }
}]

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4886/

Upvotes: 1

Related Questions