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

Answer 2

The best way to control the columns and make sure they don't stack/overlap over each other is by controlling the width of the chart. you can do this within the containing <div>.

• CSS: min-width ~ allows the div to change size, but restrict it from going under a certain width. You do this because you know once it is under that width stuff start to blur together and is unreadable.
• CSS: width ~ forces the width of the chart to allows be a certain value.
• CSS: no width set ~ notice if you shrink the browser window down to far it begins to make the chart unreadable.

By controlling the width of the containing div and rotating the label as c0deNinja suggested, you can prevent most stack over/overlap issues. However, if you chart has to many series/data points, even this won't help.

​

Answer 3

My problem was similar and I was getting nowhere with solutions which moved items to the secondary axis etc. Then I found my x axis was being recognized as a continuum (in this case: date) and the two overlapping columns were of course sharing the same x value.

I solved the problem by selecting the x axis, found the option called "axis type" and deselected "automatically select based on data" changing it to "text axis". That got my columns side by side.

A bit overdue for your problem but maybe helpful.