Need to draw arrow line from bubble chart to another div using css3

Solution 1:

You can create the diagram by using only one Highcharts chart. Each section can be a separate x-axis and y-axis:

  yAxis: [{
    ...
  }, {
    ...
  }, {
    offset: 0,
    lineWidth: 1,
    height: '40%',
    top: '60%',
    left: '20%',
    width: '60%',
    title: null
  }],
  xAxis: [{
    ...
  }, {
    ...
  }, {
    offset: 0,
    width: '60%',
    left: '20%',
    height: '40%',
    top: '60%'
  }]

Then, with the help of Highcharts.SVGRenderer class in render event, draw the required connections by using values stored in the chart.

  chart: {
    type: 'bubble',
    events: {
      render: function() {
        const chart = this;
        const series = chart.series;
        const yAxis3 = chart.yAxis[2];
        const p1 = series[0].points[0];

        if (!p1.customLink) {
          // create the connection only at first render
          p1.customLink = chart.renderer.path().attr({
            ...
          }).add();
        }
        // update the connection dimensions on each render
        p1.customLink.attr({
          d: [
            ...
          ]
        });
      }
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/r7p2t4j6/

Docs: https://www.highcharts.com/docs/advanced-chart-features/freeform-drawing

API Reference:

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path