<!-- required files -->
<script src="../assets/plugins/flot/source/jquery.canvaswrapper.js"></script>
<script src="../assets/plugins/flot/source/jquery.colorhelpers.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.saturated.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.browser.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.drawSeries.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.uiConstants.js"></script>

<div id="bar-chart" class="h-250px"></div>

<script>
  var data = [[0, 10], [1, 8], [2, 4], [3, 13], [4, 17], [5, 9]];
  var ticks = [[0, 'JAN'], [1, 'FEB'], [2, 'MAR'], [3, 'APR'], [4, 'MAY'], [5, 'JUN']];
  $.plot('#bar-chart', [{ label: 'Bounce Rate', data: data, color: app.color.componentColor }], {
    series: {
      bars: {
        show: true,
        barWidth: 0.6,
        align: 'center',
        fill: true,
        fillColor: 'rgba('+ app.color.componentColorRgb + ', .25)',
        zero: true
      }
    },
    xaxis: {
      tickColor: 'rgba('+ app.color.darkRgb + ', .15)',
      autoscaleMargin: 0.05,
      ticks: ticks
    },
    yaxis: {
      tickColor: 'rgba('+ app.color.darkRgb + ', .15)'
    },
    grid: {
      borderColor: 'rgba('+ app.color.darkRgb + ', .15)',
      borderWidth: 1,
      backgroundColor: 'rgba('+ app.color.darkRgb + ', .035)',
      tickColor: 'rgba('+ app.color.darkRgb + ', .15)'
    },
    legend: {
      noColumns: 0
    },
  });
</script>