Flot Chart Bar spacing

Question

I am using flotchart JS for showing bar graphs. However, I can't seemed to fix the spacing between bars.

I have enabled panning already. However, sets the width of the bar according to the placeholder. How can set each bar's spacing according to its label?

this is my code:

$.plot("#graph", [ data ], {
        series: {
          bars: {
            show: true,
            barWidth: 0.6,
            align: "center"
          }
        },
        xaxis: {
          mode: "categories",
          showTicks: false,
          gridLines: false,        
          panRange: [0,null],
        },
        yaxis: {
          panRange: [0, null],
          plotPan: false //pan axis is allowed for plot pan
        },
        pan: {
          interactive: true,
          mode: "smart",   
          active: true
        }
      });

Answer 1

You can achieve this by limiting the number of bars shown at once by giving a max property for the xaxis:

    xaxis: {
      mode: "categories",
      showTicks: false,
      gridLines: false,        
      panRange: [0,null],
      max: 7, // set according to your needs, maybe dynamic depending on chart width
      min: 0
    },

You then have to use panning to see the other bars. See this fiddle for an example.

Answer 2

An alternative solution to your problem could be to rotate the tick labels for example by using the tickrotor plugin:

    xaxis: {
      mode: "categories",
      showTicks: false,
      gridLines: false,        
      panRange: [0,null],
      rotateTicks: 90
    },

You may need to increase the height of the chart since the labels now take up more space. See this fiddle for a full example.