Highcharts - 将y轴绘图线标签放在图表区域之外

Question

如何将情节线标签放在图表区域外的yAxis上？ 或者增加图表区域的外部宽度以显示情节线标签

JSFIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='apple'><i class='fa fa-check'></i>Apple
</label>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='linux'><i class='fa fa-check'></i>Linux
</label>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='windows'><i class='fa fa-check'></i>Windows
</label>
<button type='submit'>Submit</button>

Answer 1

使用marginRight，并更新情节线标签

   label: {
    x: 50, //shifts right
    y:-15, //shifts top
  },

＆＃13;

＆＃13;

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginRight: 100
  },
  xAxis: {
    categories: ['US']
  },
  yAxis: {
    plotLines: [{
      color: '#FF0000',
      width: 1,
      value: 15.9,
      label: {
        allowOverlap: false,
        text: '15.9%<br> Average',
        align: 'right',
        x: 50,
        y: -15,
        style: {
          color: 'blue',
          fontWeight: 'normal',
          fontSize: '10px'
        }
      },
      zIndex: 5
    }]
  },
  plotOptions: {
    series: {
      allowPointSelect: true
    }
  },
  series: [{
    data: [30.5]
  }]
});


// the button action
$('#button').click(function() {
  var selectedPoints = chart.getSelectedPoints();

  if (chart.lbl) {
    chart.lbl.destroy();
  }
  chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60)
    .attr({
      padding: 10,
      r: 5,
      fill: Highcharts.getOptions().colors[1],
      zIndex: 5
    })
    .css({
      color: 'white'
    })
    .add();
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Get selected points</button>

＆＃13;

＆＃13;

＆＃13;