Question

The problem is as follows:

If I have a very sparsely populated date time x axis with column chart type then some columns are getting cut.

Here is a fiddle example: http://jsfiddle.net/qzqnX/

In this example, I have two columns and the column on extreme ends is getting cut.

If I increase data to have 3 columns, one of the series gets completely hidden.

Here is fiddle example: http://jsfiddle.net/GrKKt/

I would like to have the columns displayed within the plot area and not get partially cut or hide. It would also be nice if they draw with some margin from the plot area extremities. Thanks.

Answer 1

I have found two solutions to the problem above:

First solution as given in first answer is to add nulls. I have found that adding two nulls is optimum and works fine. Even if you have lots of series in your data.

Example: http://jsfiddle.net/vwzeP/

Second solution is to add minPadding, maxPadding to xaxis. There is no need to add nulls to your input either. But highcharts is a little inconsistent in its behavior for padding. So you need to apply different values for min/maxPadding properties. Once you have more than 6 points on datetime x-axis the column width are automatically according to plot area and you can set minPadding/maxPadding to their default of 0.01.

good padding values are following:

switch (numberOfPointsInDataArray) {
        case 1:
        case 2:
            padding = 0.25;
            break;
        case 3:
            padding = 0.13;
            break;
        case 4:
            padding = 0.075;
            break;
        case 5:
            padding = 0.05;
            break;
        case 6:
            padding = 0.03;
            break;
    }

Example of padding with 2 points in data array: http://jsfiddle.net/J7zsk/

hope this helps others.