Search code examples
jqueryflot

flot bar widths not displaying equally

I'm attempting to draw a flot chart.

  • bar chart
  • time on the x-axis
  • all bars should be the same x-size (width)

Here's the code used:


var data = [{
    color: '#ff7e00',
    data: [
        [1692473400, 19.95],
        [1692480600, 19.194],
        [1692484200, 18.606],
    ]
}, {
    color: '#ff0000',
    data: [
        [1692468000, 32.76],
        [1692469800, 33.894],
        [1692471600, 20.139],
        [1692475200, 21],
        [1692477000, 21],
        [1692478800, 21.231],
        [1692482400, 20.16],
    ]
}];

$.plot("#pricesToday", data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.6,
            align: "left"
        }
    },
    xaxis: {
        mode: "time",
        timeformat: "%H:%M",
        timezone: "none"
    }
});

This gives the below render:

incorrect render

As you can see, it is not equally sized, despite seeing barWidth: 0.6, Is this a mistake I've made? How do I force it to be equal sized?

It could be a bug, but I wanted to check this before I raise a bug report.

Thanks

Solution

  • After some investigation: this is ONLY a valid bug on the github version of flot. Archived/hosted versions do not have this bug, such as

        <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>

    For all others, suggest you use a tagged version of 0.8.3 until this is fixed.

    I raised a bug: https://github.com/flot/flot/issues/1856

    TLDR: Do not use https://github.com/flot/flot master branch