Highcharts yAxis labels inside plot area and left padding

Question

I have a column chart that has yAxis labels inside the plot area. DEMO: http://jsfiddle.net/o4abatfo/

This is how I have set up the labels:

yAxis: {
  labels: {
    align: 'left',
    x: 5,
    y: -3
  }
}

The problem is that the leftmost column is so near the plot area edge that labels are overlapping it. Is there a way to adjust the plot area padding so that the columns would start a bit further on the right?

Answer 1

You can set min value as -0.49.

http://jsfiddle.net/o4abatfo/2/

Answer 2

One possible solution:

Keep the labels on the outside, and apply the plotBackgroundColor as the chart backgroundColor.

This means that the legend will be encased in the background color too, but, again, it's on option.

Example:

• http://jsfiddle.net/jlbriggs/o4abatfo/11/

Answer 3

I asked the same thing in the Highcharts forum and got this solution as a reply from @paweł-fus:

var chartExtraMargin = 30;

Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisSize', function (p) {
  p.call(this);
  if (this.isXAxis) {
    this.left += chartExtraMargin;
    this.width -= chartExtraMargin;

    this.len = Math.max(this.horiz ? this.width : this.height, 0);
    this.pos = this.horiz ? this.left : this.top;  
  }
});

However, adding this made the tooltips appear in the wrong position. This was fixed by overriding the Tooltip.prototype.getAnchor() method and adding the extra margin in the x coordinate:

Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function(p, points, mouseEvent) {
  var anchor = p.call(this, points, mouseEvent);
  anchor[0] += chartExtraMargin;
  return anchor;
});