score:1

Are you using a categorized x axis?

The problem should solve itself if you instead use a datetime x axis, and let the chart figure out the tickinterval for you.

score:3

1) You can use rotation:

xAxis: {
    labels: {
    rotation: -90,
    align: 'right'
  }
}

2) If rotation will not help - you can calculate step (if xaxis categorized). This code will calculate step on load, on add series and on zoom.

chart: {
      zoomType: 'x',
      events: {
        addSeries: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        },
        load: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        }
      }
    },
    xAxis: {
          events: {
            setExtremes: function (event) {
              if (Math.abs(this.options.labels.rotation) == 90) {
                var labelWidth = parseInt(this.options.labels.style.lineHeight) + 2;
                var plotAreaWidth = parseInt(this.chart.plotBox.width);
                var labelsCount = Math.floor(plotAreaWidth / labelWidth);
                if (event.max !== null && event.max !== undefined) {
                  var pointsCount = Math.round(event.max - event.min);
                } else {
                  var pointsCount = Math.round(this.dataMax - this.dataMin);
                }
                var step = Math.ceil(pointsCount / (labelsCount * (this.tickInterval == null ? 1 : this.tickInterval)));
                this.update({'labels': {'step': step}}, true);
              }
            }
          }
        }

score:4

I solved this using the tickInterval property and some very basic algebra. The number of labels shown on the graph is given by

seriesLength / tickInterval = labelCount

So if we can only fit 11 labels, set labelCount to 11 and rearrange the formula above to solve for tickInterval:

var tickInterval = seriesLength / 11

The tickInterval property must be an integer, so convert it before assigning it to the axes' tickInterval property:

$j('#container').highcharts({

    xAxis: {
        tickInterval: Math.ceil(tickInterval)
    }

    // other Highcharts properties omitted
}

score:7

You can also use tickInterval to define distance between ticks.


Related Query

More Query from same tag