CODEWITHSUNDEEP
javascriptchartsflot
CadentOrange
CadentOrange

Reputation: 3343

Consistent bar widths in flot charts

I'm having trouble getting consistent bar widths in Flot. I have charts that can have anywhere between 1 and 10 data points. When there are 10 data points, the bars are the right size. However when there are less than 10 data points, the bars in the chart start getting fatter. The following two images demonstrate this.

Thin bars

The bars are decently sized when there are 10 items.

Fat bar

The bar becomes incredibly large when there is only 1 item.

I am aware of the barWidth property and I've tried changing it. The problem is that it only affects the size of the bars in the chart with 10 items but it leaves the chart with the fat bar alone.

I have also read somewhere that I could try changing the height of the div containing the chart, but I would like to avoid this as I want the charts to have a fixed dimension regardless of items displayed.

Upvotes: 2

Views: 3795

Answers (2)

cryss
cryss

Reputation: 4499

I think you must pass somewhere labels to your yaxis (ticks property). Assume that your labels are in myLabels array. So if there is only 1 label, add new empty label before and after it to make your only bar smaller:

var myLabels = [];

// add a fake label (in my production code I grab labels from the server)
myLabels.push([0, 'My only label']); // This label has index=0

if (myLabels.length == 1) {
    myLabels.splice(0, 0, [-1, '']); // (-1) is the new index lower than my label's index
    myLabels.push([1, '']); // (1) is the new index greater than my label's index
}

// In configuration of a plot:

// [...]
yaxis: {
    ticks: myLabels,
    // [...]
},

Upvotes: 0

DNS
DNS

Reputation: 38189

The problem is that barWidth is expressed in axis units. As you reduce the number of bars the y axis automatically scales, until with only one bar it's going from 0 to 1, and the default bar width of 0.8 takes up most of the vertical space.

You can solve this in two ways:

  1. Calculate the barWidth to scale with the number of series, i.e. 0.8 * numSeries / maxSeries. If maxSeries is 10, then the barWidth scales from 0.8 for 10 series to 0.08 for one series.

  2. Set a fixed min & max on the y axis, with max being numSeries + (maxSeries - numSeries) / 2 and min being -(maxSeries - numSeries) / 2. This reserves space above and below the bars even as their number drops below maxSeries.

Both of these require that you have some idea of the maximum number of series that will be present.

Upvotes: 6

Related Questions