Highcharts columnchart: How to separate overlapping columns

Question

I am using highCharts to plot certain data points in a column chart. My x-axis is datetimestamped and y-axis is simple numeric frequency.

Two of my datapoints are overlapping. I want them to be shown as separate columns on the chart. I also want my x-axis to show only month 'year.

My JavaScript is below:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
    type:'datetime',
            dateTimeLabelFormats: {
                        month: '%b \'%y'
            },          
    tickInterval: 24 * 3600 * 1000 * 30
    },
        yAxis: {
            min: 0,
            title: {
                text: 'Frequency'
            }
        },
        plotOptions: {
            column: {
            pointPadding: 0.2,
            pointWidth: 10
            }
        },
        series: [{"name":"warning","data":[{"x":1367391600000,"y":1}]},{"name":"pass","data":[{"x":1367391600000,"y":2}]},{"name":"fail","data":[{"x":1370070000000,"y":1}]}]
    });
});

ISSUE:

My first and second datapoints are overlapping columns. IF one is shown, other gets hidden. Can somebody help me with this.

http://jsfiddle.net/X4UJd/

Also, I want my chart to be uniformly distributed on-axis...right now it has just 2 columns on 2 extremeties of the axis. — ASingh

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-07-18T10:50:36

You should set pointRange parameter, like in the example: http://jsfiddle.net/sbochan/X4UJd/1/

http://api.highcharts.com/highcharts#plotOptions.column.pointRange

Highcharts columnchart: How to separate overlapping columns

ISSUE:

2 Answers