Highcharts: xAxis with vertical gridlines

Question

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).

vertical gridlines effect

Unfortunately, that solution isnt' entirely accurate because it switches the order of the data as well, so in fact the Distance scale ends up at the side of the chart, while it should be at the bottom of it, like here:

proper data order but with horizontal gridlines

My question is: is there a way to make gridlines display vertically without switching the order of the data?

Here's the exemplary chart from Highcharts demo, where I would like to change the display of the gridlines:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'spline',
        inverted: false
    },
    xAxis: {
        reversed: false,
        labels: {
            formatter: function () {
                return this.value + 'km';
            }
        },
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function () {
                return this.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]]
    }]
});

PS I would prefer not to tamper with the order of the data that's being passed to the function.

Always check the docs. See: api.highcharts.com/highcharts/xAxis.gridLineWidth - defaults to 0 — jlbriggs

Grzegorz Blachliński Grzegorz Blachliński · Accepted Answer · 2016-09-15T11:08:38

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

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'spline',
      inverted: false
    },
    xAxis: {
      reversed: false,
      gridLineWidth: 1,
      labels: {
        formatter: function() {
          return this.value + 'km';
        }
      },
    },
    yAxis: {
      title: {
        text: 'Temperature'
      },
      gridLineWidth: 0,
      labels: {
        formatter: function() {
          return this.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/

Highcharts: xAxis with vertical gridlines

1 Answers