CODEWITHSUNDEEP
jqueryflot
Beems
Beems

Reputation: 810

Flot: Horizontal Stacked Bar - Remove Unnecessary Padding

jQuery: 1.10.1
Flot: 0.7, 0.8
JSFiddle: http://jsfiddle.net/26gbkyb9/4/

For some reason, I can't seem to get rid of the padding (white space inside the grid, but outside the bars) on a horizontal bar. If you look at the JSFiddle link above, you can see that the problem doesn't exist on a vertical bar, so I can only assume it is a bug. However, I'm wondering if anyone has a fix that I can apply. I've dug through the Flot Reference on GitHub without any luck whatsoever. EDIT: I should note that the padding only increases as the height of the graph increases.

Image of output:
Image of output

Code:

<script>
var datahorz = [
    {label: 'Compliant', data: [[90,1]]},
    {label: 'Noncompliant', data: [[10,1]]},
];          
var ticks = [[0, "0%"], [10, "10%"], [20, "20%"], [30, "30%"], [40, "40%"], [50, "50%"], [60, "60%"], [70, "70%"], [80, "80%"], [90, "90%"], [100, "100%"]]
var optionshorz = {
    series: {stack: 1,
             lines: {show: false, steps: false },
             bars: {show: true, align: 'center'},},
    bars: {horizontal: true, lineWidth: 0},
    yaxis: {show: false},
    xaxis: {ticks: ticks, tickSize: 100},
    legend: {show: false}, 
    grid: {borderWidth: 1}
};

$(document).ready(function() {
    $.plot($("#flot-placeholder30DayHorz"), datahorz, optionshorz);
});
</script>
<div id="flot-placeholder30DayHorz" style="width:600px;height:100px;margin:20px;"></div>

Any suggested workarounds are appreciated.

Upvotes: 2

Views: 510

Answers (2)

justisb
justisb

Reputation: 7280

Rather than setting the min/max values explicitly, you can also set the axis autoscaleMargin option to null to prevent the extra padding from being applied:

yaxis: {
    /* other options */
    autoscaleMargin: null
},

This will allow the chart min/max values to still scale automatically with the dataset, but without the added whitespace.

Upvotes: 0

Raidri
Raidri

Reputation: 17560

Plot automatically changes the min and max values for the y-axis on the horizontal chart to 0.48 ... 1.52 instead of 0.5 ... 1.5 (I have no idea why).

If you specify the min and max values in your optionshorz like this

yaxis: {
    show: false,
    min: 0.5,
    max: 1.5
},

you get the chart without padding. See the updated fiddle.

Btw: The same is true with the padding at the top of the vertical chart. Here the max value is set to 102 instead of 100.

Upvotes: 1

Related Questions