CODEWITHSUNDEEP
javascriptchartshighcharts
apokryfos
apokryfos

Reputation: 40680

Slanted highcharts axis labels overlap with legend

I made a small fiddle based on the highcharts demos at http://jsfiddle.net/w53woene/1/

The issue I have boils down to four things:

1) I need to rotate the labels (this is based on a feature request so I can't ignore it). 

labels: { 
    rotation: -45
}

2) The fact that the last label is really really long. This is based on data which is given for each chart so it's not always the case but it's the case around 30%-40% of the time so quite often.

3) Labels shouldn't be wrapped or shortened with an ellipsis.

4) I need to add spacing between the chart and the legend to adapt to the labels size but only when the label is going to be too long and colliding with the legend.

This only seems to happen when the chart: { inverted: true } and if it's not inverted the legend behaves normally, increasing the distance from the chart as needed.

Ideally I'd like to know if there's a specific option I'm missing that achieves this natively, i.e., I would have expected floating: false to achieve this the same way it does when the chart is not inverted, but it doesn't seem to. If this isn't possible I'd like to know how I can adjust the chart size (excluding the legend) in order to achieve this via JavaScript.

Upvotes: 0

Views: 779

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

The problem is that vertical axis add space on the left size, but doesn't add on the bottom. I would wrap labels for a better readability: http://jsfiddle.net/w53woene/2/ - otherwise it may happen that you will have so long label that chart will get 0 pixels for plotting area.

If you really need non-wrapped text, then I would wrap Axis.prototype. getOffset to add extra space:

(function(H) {
  H.wrap(H.Axis.prototype, 'getOffset', function(p) {
    p.call(this);
    if (this.isXAxis) {

      var lastTick = this.tickPositions[this.tickPositions.length - 1],
        lastLabel = this.ticks[lastTick].label,
        height = lastLabel.getBBox(true).height;

      this.labelDiff = height - this.chart.marginBottom;
      if (this.labelDiff > this.chart.axisOffset[2]) {
        this.chart.axisOffset[2] = this.labelDiff;
      } else {
        this.labelDiff = 0;
      }
    } else {
      this.offset -= this.chart.xAxis[0].labelDiff;
    }
  });
})(Highcharts)

And live demo: http://jsfiddle.net/vwegeuvy/

Upvotes: 1

Related Questions