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

Last Reply 5 months ago By Rockstar8

Posted 5 months 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 5 months ago.
Posted 5 months ago
dharmendr says:
https://stackoverflow.com/questions/4892160/show-value-within-bar-on-flot-bar-chart

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