Aligning The Xaxis Of Highcharts

https://jsfiddle.net/hjzeo6u2/ In the above Link I have reproduced an issue where I wanted to align the X-Axis labels just below the respective series plots. As of now both the X-A

Solution 1:

Would you like to achieve something like this? Demo

chart: {
  events: {
    render() {
      let chart = this,
        xAxis = chart.xAxis,
        controlLine = chart.yAxis[0].resizer.controlLine;

      xAxis[1].axisGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
      xAxis[1].labelGroup.translate(0, -xAxis[1].axisGroup.getBBox().y + controlLine.getBBox().y)
    }
  }
},