I am constructing a progress-bar using bar chart(with percentage stacking) and would like to remove the spaces/padding in the container and keep only the bar without any padding/margin spaces in the chart container.
Is there a way of accomplishing this?
Fiddle
Code:
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
legend: {
enabled: false,
},
title: {
text: ''
},
xAxis: {
lineWidth: 0,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: ''
},
lineWidth: 0,
gridLineWidth:0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
stacking: 'percent'
},
series: {
pointPadding: 0,
groupPadding: 0,
}
},
series: [{
name: 'max',
data: [40],
color: 'white'
}, {
name: 'current',
data: [60],
color: 'green'
}]
});
});
});
You can simple remove margins:
chart: {
renderTo: 'container',
....
margin: 0
}
See: http://jsfiddle.net/gRYGn/4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With