title: jQuery flot multi bar chart side by side
body: <p>I'm using jQuery plot with the categories plugin to create charts.
  I want to plot two bars side by side for each month with this code:</p>
  
  <pre><code>$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], {
          series: {
              bars: {
                  show: true,
                  barWidth: 0.5,
                  align: "center",
  
              }
          },
          xaxis: {
              mode: "categories",
              ticks: [[0,"Jan"], [1,"Feb"],  [2,"Mär"],  [3,"Apr"],  [4,"Mai"],  
                      [5,"Jun"],  [6,"Jul"],  [7,"Aug"],  [8,"Sep"],  [9,"Okt"],  [10,"Nov"],  [11,"Dez"]],
              tickLength: 1,
  
          },
          grid: {
              hoverable: true,
          },
          yAxis: {
              allowDecimals:false,
      }
      });
  </code></pre>
  
  <p>And that's my result:</p>
  
  <p><img src="https://i.stack.imgur.com/ZG2L6.png" alt="plotting a chart"></p>
  
  <p>The bars are still overlapping but I want my result to look like</p>
  
  <p><img src="https://i.stack.imgur.com/Mbmxk.png" alt="Correct chart"></p>
  
  <p>Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.</p>
  
  <p>Here's the jsfiddle: <a href="http://jsfiddle.net/buk8mhy8/" rel="noreferrer">http://jsfiddle.net/buk8mhy8/</a></p>