CODEWITHSUNDEEP
highcharts
Rezzy
Rezzy

Reputation: 334

How to increase spacing between sideway bar charts in highcharts?

I am trying to increase the space between charts in this link however i have used minPadding/maxPadding in xAxis and pointWidth: 90/pointPadding: 0 but nothing works. It seems to me that there is forced spacing at the top and bottom of the chart area which is causing this. http://jsfiddle.net/j7NMC/2/

/*What i have tried */    
series:{
    pointWidth: 90,
    pointPadding: 0
}
xAxis: {minPadding:0, maxPadding:0,}

Any ideas? Thank you :)

Upvotes: 1

Views: 3879

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

I would suggest changing your data setup. Instead of 3 different series, use 1 series and 3 categories:

series: [{
  data: [973,133,107]
}]

example: http://jsfiddle.net/j7NMC/4/

What this does for you:

1) eliminates that wasted space on the chart

2) eliminates need for legend by putting the labels right on the axis next to the bar (drastically improves usability of chart, makes comprehension much easier for user)

3) eliminates need for multiple colors for the bars (drastically improves usability of chart, makes comprehension much easier for user)

EDIT:{ you can try setting the groupPadding to 0 to remove some of the space, as the the 3 series you have displayed are grouped, and extra space is being added because of that.

Upvotes: 1

SteveP
SteveP

Reputation: 19093

The options need to be in the 'bar' section of plotOptions, and you don't need a series entry in plotOptions i.e. like this:

 plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                },
                pointWidth: 10,
                pointPadding: 0
            }
 },

http://jsfiddle.net/A8dpf/

Upvotes: 0

Related Questions