Is it possible to sync zoom between two scatter highcharts?

Question

I want to achieve two things.

1 - In the above image, imagine that the top part does not exist to begin with. If the user were to click on any point on the bottom chart, I want the top chart to be created with a magnified view. And if the bottom part is clicked and dragged, the top part should follow that.

2 - If the bottom chart were zoomed in, I want the top chart to also be zoomed in. Ex: If bottom was 1x and top was 2x, if I zoom bottom by 2x, top should now be 4x.

Are these possible with highcharts?

Answer 1

Yes, that behavior is easily achievable in Highcharts. All you need to do is to use Axis.afterSetExtremes and Point.click event callback function to create or update another chart with proper axis extremes. For example:

var chart1,
  scale = 4;

function createOrUpdateDetail() {
  var isPointClick = !this.lin2log,
    chart = this.chart || this.series.chart,
    xMin = chart.xAxis[0].min,
    xMax = chart.xAxis[0].max,
    xRange = xMax - xMin,
    xCenter = (xMax + xMin) / 2,
    yMin = chart.yAxis[0].min,
    yMax = chart.yAxis[0].max,
    yRange = yMax - yMin,
    yCenter = (yMax + yMin) / 2,
    calcXMin,
    calcXMax,
    calcYMin,
    calcYMax;

  if (isPointClick) {
    xCenter = this.x;
    yCenter = this.y;
  }

  calcXMin = xCenter - xRange / scale;
  calcXMax = xCenter + xRange / scale;
  calcYMin = yCenter - yRange / scale;
  calcYMax = yCenter + yRange / scale;

  if (!chart1) {
    chart1 = Highcharts.chart('container', {
      series: [{
        type: 'scatter',
        data: this.series.options.data
      }],
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
        min: calcYMin,
        max: calcYMax
      }
    });

  } else {
    chart1.update({
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        min: calcYMin,
        max: calcYMax
      }
    });
  }
}

Highcharts.chart('container2', {
  chart: {
    zoomType: 'xy',
    panning: true,
    panKey: 'shift'
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
  },
  xAxis: {
    events: {
      afterSetExtremes: createOrUpdateDetail
    }
  },
  series: [{
    type: 'scatter',
    data: [...],
    point: {
      events: {
        click: createOrUpdateDetail
      }
    }
  }]
});

---

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

API Reference:

https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

https://api.highcharts.com/highcharts/series.scatter.events.click

https://api.highcharts.com/class-reference/Highcharts.Chart#update