Search code examples
jqueryflot

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.

Solution

  • 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.