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

Last Reply 22 days ago By Rockstar8

Posted 23 days ago

Hi,

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">
<html>
<head>
  <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>
</head>
<body>
  <div id="placeholder" style="width:550px;height:200px;"></div>
</body>
</html>

 

$(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);
});

 

 

You are viewing reply posted by: Rockstar8 22 days ago.
Posted 22 days ago
dharmendr says:
https://stackoverflow.com/questions/4892160/show-value-within-bar-on-flot-bar-chart

 https://the.chuntering.dev/flot-barnumbers/ - working