David Vincent David Vincent - 2 months ago 6
CSS Question

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

Answer

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