CODEWITHSUNDEEP
jqueryflot
shorif2000
shorif2000

Reputation: 2654

Big gap in middle of stacked Flot bar chart

I have created a stacked bar chart in Flot and there is big gap in the middle. I cannot understand why. I have used a working jsfiddle and put some of my data on top.

http://jsfiddle.net/shorif2000/t3Vqh/261/

var overdue = {
    label: 'overdue',
    data: [
     [1, 15],[2, 67],[3, 77],[4, 179],[5, 118],[6, 133],[46, 1],[47, 20],[48, 37],[49, 15],[50, 50],[51, 39],[52, 64]
    ]
  };

Upvotes: 1

Views: 114

Answers (1)

Raidri
Raidri

Reputation: 17550

There is a large gap in the chart because there is a large gap in your x values between 6 and 46. if you want to have the bars positioned like your ticks you have to use the "real" x values from the ticks, not the display value (tick name).

Change your data to 

[-1, 1],[0, 20],[1, 37],[2, 15],[3, 50],[4, 39],[5, 64],[6, 15],[7, 67],[8, 77],[9, 179],[10, 118],[11, 133]

and it works (btw: the original datapoint [46, 1] has no correspoding tick).
See this updated fiddle for the working example.

Upvotes: 1

Related Questions