title: How to center bars in Flot charts?
body: <p>I'm using <a href="http://www.flotcharts.org/" rel="nofollow noreferrer">Flot</a> library with <a href="https://www.npmjs.org/package/angular-flot" rel="nofollow noreferrer">angular-flot</a>. I have a fixed sized chart which doesn't look nice when having f.e. 1 or 2 bars. You can see the example below for 2 bars:</p>
  
  <p><img src="https://i.stack.imgur.com/aUzW2.png" alt="2 bars"></p>
  
  <p>The bars try to spread over the whole length of the x axis. I want the to be centered - they should "start" in the middle and spread horizontally. Is that possible in Flot?</p>
  
  <p>My options for bars:</p>
  
  <pre><code>options: {
      series: {
          bars: {
              show: true,
              barWidth: 0.4,
              lineWidth: 1,
              align: 'center',
              fillColor: {
                  colors: [{
                      opacity: 0.5
                  }, {
                      opacity: 0.1
                  }]
              }
          }
      },
      xaxis: {
         mode: 'categories',
         axisLabel: 'Machines',
         axisLabelUseCanvas: true,
         axisLabelFontSizePixels: 14,
         axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
         axisLabelPadding: 10
      },
      yaxis: {
         axisLabel: metricName,
         axisLabelUseCanvas: true,
         axisLabelFontSizePixels: 14,
         axisLabelFontFamily: 'RobotoLight, Helvetica Neue, Helvetica',
         axisLabelPadding: 10
      },
      grid: {
         hoverable: true,
         clickable: false,
         borderWidth: 1
      }
  }
  </code></pre>