Display (Show) value in Bar using jQuery Flot stacked bar Chart

Last Reply one month ago By Rockstar8

Posted one month ago


Below is code for stacked flot chart

How to display value in the bar in flot stacked bar chart

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if IE]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.stack.js"></script>
  <title>Flot stacked bar example</title>
  <div id="placeholder" style="width:550px;height:200px;"></div>


$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'foo', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
        {label: 'bar', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
        {label: 'baz', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
    var options = {
        series: {stack: 0,
                 lines: {show: false, steps: false },
                 bars: {show: true, barWidth: 0.9, align: 'center',},},
        xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five']]},

    $.plot($(css_id), data, options);



This question does not have replies that have been liked.