Highcharts: Plot multiple values in single category

Question

I'm quite new to Highcharts. I want to make one sample chart like:

Main problem is that, multiple values in single category. I couldn't mitigate this.

I've written something like this

$('#container').highcharts({
    title: '',
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar']
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    series: [
      {
        type: 'column',
        showInLegend: false,
        data: [[0, 5000, 11000], [0, 6000, 10000], [0, 8000, 5000], [1000, 2000, 4000], 
          [1000, 9000, 4800], [1500, 10000, 4000], [0, 6500, 4500]],
        color: '#75b5ec'
      },
      {
        type: 'spline',
        data: [3, 2.67, 3],
        showInLegend: false,
        marker: {
          lineWidth: 2,
          lineColor: '#000000',
          fillColor: 'white'
        }
      }
    ]
  });

Please help. Thanks in advance.

Answer 1

You can simply set the tickInterval on the xAxis to 4.

Another option which may give you more control is to not use categories at all, but switch to using a datetime axis. That way, highcharts takes care of plotting the months etc. A simple example can be found here:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime/

Documentation on axis types here: http://api.highcharts.com/highcharts#xAxis.type

To plot what you want, change that example to add another series to the chart, of type 'column'. Something like this:

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 185.6, 200.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000 // one day
    },{
        type:'column',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        color:'red',
        pointInterval: 24 * 3600 * 1000 // one day
    }]

http://jsfiddle.net/1uc6sksx/

You can control the labels on the x-axis using the tickInterval option on the xAxis, e.g.

xAxis: {
        type: 'datetime',
        tickInterval:24*3600*1000*30*3
    },

sets the interval between ticks to about 3 months. http://jsfiddle.net/x29xc993/