Search code examples
javascriptjquerycssflot

Flot - How to make barchart have consistent width even if there is only 1 data

How to keep the bar width consistent when there is more than one bar? For example in this fiddle:

var testing = $.plot($("#example-section15 #flotcontainer"), dataset, options);    
testing.getOptions().series.barWidth = 5;
testing.draw();

When there is only one data point the bar width become very big although I already try to set the barWidth and redraw it again but it does not work.

Here is the result when ther is only one data point:

enter image description here

Solution

  • The bar width is always consistent in term of x-axis units. So you have to make sure, the total width of the chart in x-axis units is also fixed. You can do this by setting the min and max options for the x-axis so that the difference is always the same.

    If for example you have a maximum of 5 bars you could that the total width to 6 units. To always center the existing bars in the chart set the min and max options so that the center of the bars is at the center of the chart:

    • One bar (positon 1): Set min: -2, max: 4
    • Two bars (center at 1.5): Set min: -1.5, max: 4.5 (fiddle example)
    • ...
    • Five bars (center at 3): Set min: 0, max: 6