WebDeveloper102 WebDeveloper102 - 1 month ago 8
CSS Question

Remove padding from barcharts Highcharts.js

I'm using highcharts.js to build bar charts, sometimes with hundreds of data points(bars). How do I remove the white padding that highcharts.js puts on every bar? Check out this fiddle to see the phenomenon I'm talking about. I've tried setting the

groupPadding: 0
in the series object but there's still some padding/margin between the bars. Is there anything else I can do? Maybe highcharts.js is the wrong library for this type of plot? any suggestions are welcome, Thanks!

$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: dates ,
crosshair: true,
crosshair: true,
minTickInterval: 24
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: ticks,
groupPadding: 0

}]
});
});

Answer

Found the answer here: http://www.highcharts.com/docs/chart-and-series-types/column-chart

The above documentation shows how to zero out all spacing and I've done this to your fiddle so there are now no gaps. The code to update is your plotOptions call and keep your stacking: 'percent' call:

plotOptions: {
    column: {
        pointPadding: 0,
        borderWidth: 0,
        groupPadding: 0,
        shadow: false,
        stacking: 'percent'
    }
}

For any service always have a look in their documentation, chances are they have dealt with most issues you can think of. Usually. :)