CODEWITHSUNDEEP
javascripthighcharts
Santosh
Santosh

Reputation: 885

Highcharts - Place the y-axis plot-line label outside the chart area

How-to place the plotline label on the yAxis outside the chart area? or increase the outer width of chart area to display the plotline label

enter image description here

JSFIDDLE

> yAxis: {
>     plotLines: [{
>       color: '#FF0000',
>       width: 1,
>       value: 15.9,
>       label: {
>         allowOverlap: false,
>         text: '15.9%<br> Average',
>         align: 'right',
>         style: {
>           color: 'blue',
>           fontWeight: 'normal',
>           fontSize: '10px'
>         }
>       },
>       zIndex: 5
>     }]   },

enter image description here

Upvotes: 0

Views: 2171

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

use marginRight , and update plotline label

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


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();
});
<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>

Upvotes: 2

Related Questions