Question

Can anyone help me out here? We are trying to implement Highchart for our web application, but in some charts the X-Axis labels are overlapping, due to closer points.

The code we are using for the X-Axis:

Highcharts.setOptions({
  xAxis: {
    gridLineWidth: 1,
    lineColor: '#000',
    tickColor: '#000',
    labels: {
      style: {
        color: '#000',
        font: '11px Trebuchet MS, Verdana, sans-serif',
      }
    },
    title: {
      style: {
        color: '#333',
        fontWeight: 'bold',
        fontSize: '12px',
        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
      }
    }
  }
})

and

setXAxisParameters = {
  categories: xAxisCategories,
  title: {
    text: xAxisTitle
  },
  labels: {
    formatter: function() {
      xVal = (this.value).split("#")[0];
      if(xVal != '')
        return xVal;
      else
        return '';
    },
    y: 5,
    rotation: 90,
    align: 'left'
  }
}

Thanks in advance.

Answer 1

Without seeing an example of your data it is hard to tell how they are overlapping. You can try changing the orientation of the labels to be vertical (rotation) and/or change other options of the labels (labels).