Bar with Target Line Flot

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.crosshair.js"></script>
<div id="graph"></div>
<div id="legend-container"></div>

CSS

#graph {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 250px;
}

JavaScript

$(function() {
  var data = [{
    label: "temperature",
    data: [
      [0, 5],
      [3, 5],
      [5.0, 10],
      [6.0, 10],
      [7.0, 0]
    ]
  }];

  var options = {
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    grid: {
      hoverable: true
    },
    crosshair: {
      mode: 'x'
    },
    legend: {
      show: true,
      container: $('#legend-container')
    }
  };

  var plot = $.plot($('#graph'), data, options);
});