Jquery flot bar width automatically becomes wider

Question

I am showing 2 bars side by side using jQuery flot library. I have set a barWidth, and it renders perfectly fine.

Problem - When one of the bar's value is 0, the bar does not show. But the other bar becomes wider.

Question - how to set the width, and let it be that in any case? I have read on min, max but could not figure out how to use them.

Please see my code below -

var myData = [{
        data: plotpoints2,
        color: "red",
        bars: {
            show: true,
            barWidth: 0.9,
            fillColor: "red",
            align: "center",
            order: 1
        }
    }, {
        data: plotpoints2,
        color: "green",
        bars: {
            show: true,
            barWidth: 0.9,
            fillColor: green,
            align: "center",
            order: 2

        }
    }];

Unfortunately, the code base is quite big to repro in fiddle. — anand patil

devjalo devjalo · Accepted Answer · 2016-04-22T12:19:29

jsfiddle to play:

http://jsfiddle.net/eb4jtea4/2/

to better understand your question, did you mean with bar value the param "barWidth" ? In my example ive set the barwidth of the second to the value "0" and its still shown.

$(function () {

var plotpoints2 = [[1, 450], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
    var myData = [{
        data: plotpoints2,
        color: "red",
        bars: {
            show: true,
            barWidth: 0.6,
            fillColor: "red",
            align: "center",
            order: 1
        }
    }, {
        data: plotpoints2,
        color: "green",
        bars: {
            show: true,
            barWidth: 0,
            fillColor: "green",
            align: "center",
            order: 2
        }
    }];

    $.plot($("#placeholder"),myData);
});

Jquery flot bar width automatically becomes wider

1 Answers