title: Flot Charts. Custom color below x-axis value
body: <p>I have a Flot Bar Chart code.</p>
  
  <pre><code>$(function() {  
          var barOptions = {
              series: {
                  bars: {
                      show: true,
                      barWidth: 0.4,
                      fill: true,
                      fillColor: {
                          colors: [{
                              opacity: 0.8
                          }, {
                              opacity: 0.8
                          }]
                      }
                  }
              },
              xaxis: {
                  mode: "categories",
                  tickLength: 0 
              },              
              yaxis: {
                  min:-200, max: 200,  tickSize: 50,
              },
              colors: ["#1ab394"],
              grid: {
                  color: "#999999",
                  hoverable: true,
                  clickable: true,
                  tickColor: "#D4D4D4",
                  borderWidth:0
              },
              legend: {
                  show: false
              },
              tooltip: true,
              tooltipOpts: {
                  content: "Cost: %y %"
              }
          };
  
          var barData = {
              label: "bar",
              data: [         
              ["First", -100],["Second", 66.67],["Third", -177.77],]
  
          };
  
          $.plot($("#flot-bar-chart"), [barData], barOptions);            
  
      });
  </code></pre>
  
  <p>I want that every bar below 0 would be specific (for example red) color. I have tried to do that with threshold plugin, but it adds additional values. Is there any solution to make it?</p>