xAxis auto label dropping has stopped working afte

Question

The label looks good in Highcharts 4 but after upgrading to Highcharts 5 I started to Ellipses.

The xAxis.label property looks something like this. Is there any way I can force the label to render horizontally and drop if there is not enough room for them to be rendered ? I can't use step:1

 labels: {
    rotation: 0

  }

Highcharts-4

Highcharts-5

Rotation value I'm using for different Label Angle options are below:

• Auto - I'm using autoRatate:[-10, -20, -30, -40, -50, -60, -70, -80, -90]
• -- : rotate:0 -- I've problem with this option
• /// : rotate:-45
• ||| : rotate:90
• \\ : rotate:45

Answer 1

So I fixed the issue by calculating the step size dynamically based on the width of the xAxis.

Here is my solution:

 /**
 * Automatically calculate the step size based on the width of the container.
 * 1. Find the width of the xAxis
 * 2. Get the width of the label, which in our case is 80px.
 * 3. Find the no of labels that can be displayed on the xAxis.
 * 4. Find the max no of labels by iterating through all the xAxis.
 * 5. To find the final step size by dividing value from step 4 / step 3.
 *
 * @returns {number}
 * @private
 */

  _getLabelStep: function () {
    var xAxisWidth, labelWidth, labelsToDisplay, noOfTicks, step;
    xAxisWidth = this._getXAxisWidth();
    labelWidth = this.AXIS_LABEL_WIDTH;
    labelsToDisplay = Math.floor(xAxisWidth / labelWidth);
    noOfTicks = this._getMaxNoOfTicks();
    step = Math.floor(noOfTicks / labelsToDisplay);
    return isNaN(step) ? 0 : step;
  },

/**
 * Iterate through all the xAxis' and find the max no of ticks (labels)'.
 * @returns {number}
 * @private
 */
  _getMaxNoOfTicks : function () {
    var i ,maxNoOfTicks =0 ;
    if(this.chart && this.chart.xAxis){
        for(i=0 ; i<this.chart.xAxis.length ; i ++){
            if(this.chart.xAxis[i].dataMax && this.chart.xAxis[i].dataMax > maxNoOfTicks ){
                maxNoOfTicks = this.chart.xAxis[i].dataMax;
            }
        }
    }
    return maxNoOfTicks;

  },

/**
 * returns the width of the xAxis.
 * @private
 */
  _getXAxisWidth : function () {
    if(this.chart && this.chart.xAxis && this.chart.xAxis.length>0){
        return this.chart.xAxis[0].len;
    }
  }

• Call the function _getLabelStep and set the label step size.

  labels:{step : this._getLabelStep()} style:{width : 80px}

• To be able to calculate the step size based on the xAxis container, We must have to have defined label width. i.w 80px in my case.

Answer 2

Looks like staggerLines can take care of this, but needs to be set manually.

Fiddle:

• http://jsfiddle.net/jlbriggs/a8g87gm8/14/

Reference:

• http://api.highcharts.com/highcharts/xAxis.labels.staggerLines