score:1

Accepted answer

In broad strokes the way I have solved this in the past would be to use the mouseOver event for a point to capture that points xAxis value. See this example. In addition to getting the value, I would call a custom function that goes through all charts and highlight the same xAxis value there (if it exists).

To make this easier I would make some global array or similar that has a reference to all charts on the page. This way you don't need to explicitly reference each chart from other charts. To make this look nice and be practical, all charts need to be able to call the same custom function to highlight a value, and have a similar function that removes the highlight on the mouseOut event.

This is just one possible solution, there are many ways to achieve what you are after.

Here is a very basic implementation of what I wrote above

function sharedMouseOver() {
  let currentX = this.x
  charts = Highcharts.charts;
  charts.forEach(function(chart, index) {
    chart.series.forEach(function(series, seriesIndex) {
      series.points.forEach(function(point, pointsIndex) {
        if (point.x == currentX) {
          point.setState('hover')
        }
      })
    });
  });
}

function sharedMouseOut() {
  charts = Highcharts.charts;
  charts.forEach(function(chart, index) {
    chart.series.forEach(function(series, seriesIndex) {
      series.points.forEach(function(point, pointsIndex) {
          point.setState('')
      });
    });
  });
}

And in each chart you can find this:

plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: sharedMouseOver,
        mouseOut: sharedMouseOut
      }
    },
    ...
}

Working example: https://jsfiddle.net/ewolden/tvgL8pnh/17/

function sharedMouseOver() {
  let currentX = this.x
  charts = Highcharts.charts;
  charts.forEach(function(chart, index) {
    chart.series.forEach(function(series, seriesIndex) {
      series.points.forEach(function(point, pointsIndex) {
        if (point.x == currentX) {
          point.setState('hover')
        }
      })
    });
  });
}
function sharedMouseOut() {
  charts = Highcharts.charts;
  charts.forEach(function(chart, index) {
    //if (chart.renderTo.id === chartsId) {
    //    chosenChart = chart;
    //}
    chart.series.forEach(function(series, seriesIndex) {
      series.points.forEach(function(point, pointsIndex) {
          point.setState('')
      });
    });
  });
}


Highcharts.chart('container', {
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: sharedMouseOver,
          mouseOut: sharedMouseOut
        }
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],


});
Highcharts.chart('container2', {
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: sharedMouseOver,
          mouseOut: sharedMouseOut
        }
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }],


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

<div id="container2"></div>


Related Query

More Query from same tag