Creating a grid-like column graph in Highcharts

Question

I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.

Really would appreciate the help on this.

Answer 1

Use gridLineWidth to set the width of the grid: gridLineWidth: 2,

Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4. To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.

pointPadding: 0,
groupPadding:0,

Check the example (jsfiddle)

  $('#container').highcharts({
    chart: {
      type: 'column',
      backgroundColor: '#000000',
      plotBackgroundColor: '#808080'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      gridLineWidth: 2,
      gridZIndex: 4,
      gridLineColor:'#000000'
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      gridLineWidth: 2,
      gridZIndex: 4,
      gridLineColor:'#000000'
    },
    plotOptions: {
      series: {
        pointPadding: 0,
        groupPadding:0,
        borderColor:'#808080',
      }
    },
    series: [{
      name: 'Tokyo',
      color:'#D2691E',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });
});