Search code examples
jqueryflot

flot order bars prevent from overlapping

How can i make the legends from overlapping. When i try to increase width it is still the same

https://jsfiddle.net/shorif2000/g4tfz1c7/2/

I am using 10 series. Please see jsfiddle

var options = {
  "series": {
    "lines": {
      "show": false,
      "fill": true,
      "steps": false
    },
    "bars": {
      "show": true,
      "fill": 1,
      "align": "center",
      "barWidth": 0.13,
      "lineWidth": 0
    }
  },
  "xaxis": {
    "ticks": [

    ]
  },
  "yaxis": {
    "min": 0,
    "tickDecimals": 0,
    "minTickSize": 10
  },
  "grid": {
    "clickable": true,
    "hoverable": true
  },
  "legend": {
    "noColumns": 4
  }
};
Solution

  • (Numbers of Series) * barWidth must be smaller than one to avoid overlapping, so for 10 series you could use

    barWidth: 0.09

    See this updated fiddle.