javascript - How to prevent column overlap in Highcharts

Question

I believe this is a general question not needing to much information from my highcharts data.

I want to prevent the columns to stack over/overlap each other, how do I do this?

See image-link below on how it is now

http://highslide.com/forum/download/file.php?id=3157

jsfiddle: http://jsfiddle.net/Dzs5q/

Answer 1

Please try and reproduce the error here @ http://jsfiddle.net/jugal/bgNBG/

Highcharts by default smartly reduces width of the columns if there are way too many of them so as to avoid overlapping.

The columns will tend to overlap if you have overridden the aforementioned default behavior by specifying column.pointWidth

    column: {           
        pointWidth : 10
    }

eg: @ http://jsfiddle.net/jugal/bgNBG/2/

So to avoid overlapping, I see two options you have.

Option #1. Remove the column.pointWidth
This will make the columns thinner in order to not overlap
eg: @ http://jsfiddle.net/jugal/bgNBG/

Option #2. Use column.dataGrouping
This will help have a constant width of columns, but reducing (by grouping them) the number of columns instead to avoid clutter/overlap.

dataGrouping = {
    groupPixelWidth: 40, // Minimum width for each column
    units: [[            // Permissible groupings
        'day',
        [1, 2, 3,4,5,6]  // 1,2,3,4,5,6 days may be grouped into 1 column
        ]]
}

eg: @ http://jsfiddle.net/jugal/JraJW/4/
Similar Question @ https://stackoverflow.com/a/12354111/1566575