title: Dynamic quadrant label positions with Highcharts
body: <p>I am creating a bubble chart with quadrant labels and want to move these positions as I zoom in. I was looking at the documentation but could not figure out. I would appreciate any help on this. Thanks!</p>
  
  <p>Here is my code. <a href="http://jsfiddle.net/4ddjqspd/11/" rel="nofollow noreferrer">Link to jsfiddle</a></p>
  
  <pre><code>function segmentation(segData) {
    var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'segmentation',
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',
      },
      legend: {
        enabled: false
      },
      title: {
        text: 'Title'
      },
  
      xAxis: {
        min: 0,
        max: 6,
        gridLineWidth: 1,
        title: {
          text: 'X Label'
        },
        labels: {
          format: '{value}'
        },
        plotLines: [{
          color: 'red',
          dashStyle: 'dot',
          width: 2,
          value: 3,
          label: {
            rotation: 0,
            y: 15,
            style: {
              fontStyle: 'italic',
              color: 'red',
            },
            text: 'Y HIgh'
          },
          zIndex: 3
        }, ]
      },
  
      yAxis: {
        min: 0,
        max: 6,
        startOnTick: false,
        endOnTick: false,
        title: {
          text: 'Y Label',
        },
        labels: {
          format: '{value}'
        },
        maxPadding: 0.2,
        plotLines: [{
          color: 'red',
          dashStyle: 'dot',
          width: 2,
          value: 3,
          label: {
            align: 'right',
            style: {
              fontStyle: 'italic',
              color: 'red',
            },
            text: 'X High',
            x: 5
          },
          zIndex: 3
        }]
      },
      tooltip: {
        useHTML: true,
        headerFormat: '&lt;table&gt;',
        pointFormat: '&lt;tr&gt;&lt;th colspan="2"&gt;&lt;h4&gt;{point.job_title}&lt;/h4&gt;&lt;/th&gt;&lt;/tr&gt;' +
          '&lt;tr&gt;&lt;th&gt;X :&lt;/th&gt;&lt;td&gt;{point.x:.2f}&lt;/td&gt;&lt;/tr&gt;' +
          '&lt;tr&gt;&lt;th&gt;X:&lt;/th&gt;&lt;td&gt;{point.y:.2f}&lt;/td&gt;&lt;/tr&gt;' +
          '&lt;tr&gt;&lt;th&gt;Count :&lt;/th&gt;&lt;td&gt;{point.z}&lt;/td&gt;&lt;/tr&gt;',
        footerFormat: '&lt;/table&gt;',
        followPointer: true
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.job_title}'
          }
        }
      },
  
      series: [{
        data: [{
          'name': 'D',
          'x': 4,
          'y': 4,
          'z': 40
        }, {
          'name': 'A',
          'x': 1,
          'y': 1.158,
          'z': 4
        }, {
          'name': 'C',
          'x': 1.2,
          'y': 0.304347826087,
          'z': 7
        }, {
          'name': 'B',
          'y': 0.0118577075099,
          'z': 3
        }]
      }]
  
    }, function(chart) {
      chart.renderer.text('Quadrant B', 150, 290).css({
        color: '#929195',
        fontSize: '60px',
        fontWeight: 'bold'
      }).add();
      chart.renderer.text('Quadrant A', 600, 290).css({
        color: '#929195',
        fontSize: '60px',
        fontWeight: 'bold'
      }).add();
      chart.renderer.text('Quadrant C', 150, 735).css({
        color: '#929195',
        fontSize: '60px',
        fontWeight: 'bold'
      }).add();
      chart.renderer.text('Quadrant D', 600, 735).css({
        color: '#929195',
        fontSize: '60px',
        fontWeight: 'bold'
      }).add();
    });
  };
  </code></pre>
  
  <p>1) Before Zoom
  <a href="https://i.stack.imgur.com/NExqT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NExqT.png" alt="enter image description here"></a></p>
  
  <p>2) Zooming into Quadrant C
  <a href="https://i.stack.imgur.com/EZaMl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZaMl.png" alt="enter image description here"></a></p>
  
  <p>3) Want to see only "Quadrant C" but all the quadrant labels show up
  <a href="https://i.stack.imgur.com/HeItM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HeItM.png" alt="enter image description here"></a></p>