Highcharts: Xaxis With Vertical Gridlines

I need to create a line chart where the xAxis would show vertical gridlines instead of horizontal ones, just like in 'charts: {inverted: true}' case (example on the screen below).

Solution 1:

Have you consider using xAxis.gridLineWidth and xAxis.gridLineColor parameters? http://api.highcharts.com/highcharts/xAxis.gridLineWidthhttp://api.highcharts.com/highcharts/xAxis.gridLineColor

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'spline',
      inverted: false
    },
    xAxis: {
      reversed: false,
      gridLineWidth: 1,
      labels: {
        formatter: function() {
          returnthis.value + 'km';
        }
      },
    },
    yAxis: {
      title: {
        text: 'Temperature'
      },
      gridLineWidth: 0,
      labels: {
        formatter: function() {
          returnthis.value + '°';
        }
      },
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Temperature',
      data: [
        [0, 15],
        [10, -50],
        [20, -56.5],
        [30, -46.5],
        [40, -22.1],
        [50, -2.5],
        [60, -27.7],
        [70, -55.7],
        [80, -76.5]
      ]
    }]
  });
});

Here you can see an example how it can work: http://jsfiddle.net/r3wd8j7t/1/