title: Shifting the position of bars in a horizontal bar chart in Flot
body: <p>I have 2 charts that are generated in Flot. <img src="https://i.stack.imgur.com/ipTFb.png" alt="Sample charts"></p>
  
  <p>I would like to move the bar in the chart with 1 bar away from the x-axis. I would like it to have gaps similar to the graph with 10 bars.  For example, is there a simpler way of specifying that I want the bar to be 10 pixels away from the y-axis? </p>
  
  <p>This is the code that generates these charts:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" language="javascript" src="./flot/jquery-1.8.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="./flot/jquery.flot.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="./flot/jquery.flot.categories.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          .graph-container.store-container {
              height: 180px !important;
          }
          .graph-container.operator-container {
              height: 450px !important;
          }
  
          #top-stores-plot-numbers {
              height: 70px !important;
          }
          #top-operators-plot-numbers {
              height: 340px !important;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function() {
              var plotOptions = {
                  legend: {
                      show: false
                  },
                  series: {
                      bars: {
                          show: true,
                          barWidth: 0.7,
                          align: "center",
                          horizontal: true
                      }
                  },
                  yaxis: {
                      mode: "categories",
                      tickLength: 2,
                      axisMargin: 10,
                      autoscaleMargin: 0.05
                  },
                  xaxis: {
                      autoscaleMargin:0.1,
                      min: 0,
                      ticks: 2
                  }
              };
  
              var sn_data = [
                      [ 6087, "ACME Store"],
              ];
              var sn_ticks = [
                      [ 0, "ACME Store"],
              ];
              var sn_options = plotOptions;
              sn_options["yaxis"]["ticks"] = sn_ticks;
              sn_options["yaxis"]["max"] = 1;
              $.plot("#top-stores-plot-numbers", [ sn_data ], sn_options);
  
              var on_data = [
                      [ 50, "CRISTINA"],
                      [ 68, "CASHIER2"],
                      [ 96, "MIESZKO"],
                      [ 115, "CASHIER1"],
                      [ 209, "TRAINING 1"],
                      [ 379, "JADE"],
                      [ 640, "HOST1"],
                      [ 711, "CAROLINA"],
                      [ 795, "SUPERVISER"],
                      [ 1376, "TRAINING"],
              ];
              var on_ticks = [
                      [ 0, "CRISTINA"],
                      [ 1, "CASHIER2"],
                      [ 2, "MIESZKO"],
                      [ 3, "CASHIER1"],
                      [ 4, "TRAINING 1"],
                      [ 5, "JADE"],
                      [ 6, "HOST1"],
                      [ 7, "CAROLINA"],
                      [ 8, "SUPERVISER"],
                      [ 9, "TRAINING"],
              ];
              var on_options = plotOptions;
              on_options["yaxis"]["ticks"] = on_ticks;
              on_options["yaxis"]["max"] = 10;
              $.plot("#top-operators-plot-numbers", [on_data], on_options);
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="graph-container store-container"&gt;
          &lt;h2&gt;Top 10 by Number&lt;/h2&gt;
          &lt;div id="top-stores-plot-numbers" class="graph-placeholder"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="graph-container operator-container"&gt;
          &lt;h2&gt;Top 10 by Number&lt;/h2&gt;
          &lt;div id="top-operators-plot-numbers" class="graph-placeholder"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>