Dojo Stacked column chart issues in add total stacked value on the top of stacked


I seem to be having a problem with my dojo stacked column chart. Each stack values are placed "inside" the stacked chart. But I want these stacked totals should be at the top but outside the chart, just above the x axis labels. So How do I achieve where the stack totals are displayed just top the stacked columns . Here is my jsfiddle <a href="http://jsfiddle.net/sunman/B45PW/" rel="nofollow">link</a>. Here i need to show my Total stacked value on the top of bar, as well as tooltip for each stacked value also.

Here is my code is

require(["dojox/charting/Chart", "dojox/charting/plot2d/Lines", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedColumns", "dojox/charting/action2d/Tooltip", "dojo/ready", "dojox/charting/widget/SelectableLegend"], function(Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend) { ready(function() { var chart1 = new Chart("chart1"); chart1.title = "stacked chart"; chart1.addPlot("stackedColumnsPlot", { type: StackedColumns, gap:6, lines: true, areas: true, markers: true, labels: true, labelStyle:"inside", //maxBarSize: 35, tension: "2" }); chart1.addAxis("x", { dropLabels: false, labelSizeChange: true, rotation:-20, majorTicks:true, majorTickStep:1, minorTicks:false, font: "normal normal bold 12px Tahoma", fontColor: "black", labels: [{"value":1,"text":"A"},{"value":2,"text":"B"},{"value":3,"text":"C"},{"value":4,"text":"D"},{"value":5,"text":"E"},{"value":6,"text":"F"}] }); chart1.addAxis("y", {title:"Cost", fixLower: "major", fixUpper: "major", includeZero: true, majorTickStep:500, max: 1500, //from:1000, //to:6000, vertical: true }); chart1.addSeries("AC",[300,500,500,600,300,280] , { plot: "stackedColumnsPlot", stroke: { color: "#FFFFFF" , }, fill: "#FFAEAE " }); chart1.addSeries("TV", [244,301,699,620,820,837], { plot: "stackedColumnsPlot", stroke: { color: "#FFFFFF" }, fill: "#FFEC94" }); chart1.addSeries("ACCE", [500,100,100,100,200,250] , { plot: "stackedColumnsPlot", stroke: { color: "#FFFFFF" }, fill: "#B4D8E7" }); chart1.addSeries("OTHER", [100,150,100,700,700,0,800,300,300] , { plot: "stackedColumnsPlot", stroke: { color: "#FFFFFF" }, fill: "#56BAEC" }); new Tooltip(chart1, "stackedColumnsPlot", { text: function(chartItem) { console.debug(chartItem); //return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y; // return "Comparision Rating: " + chartItem.y; return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y; } }); chart1.render(); new SelectableLegend({ chart: chart1, horizontal: true, align:top }, "chart1SelectableLegend"); }); });

In my experience, when I have a series with first value: 300, and another with first value: 244, the tooltip shows static series name Value:300 and value: 244. when hovering over these series. I would like it to still show AC: 300 and TV: 244 with total stacked value show on the top of the stacked as Total: 544. But I am unble to get this type of value . Appreciate any help.


I'm not 100% sure what you are trying to achieve in the end but you can definitely dislpay "AC: 300, TV: 244" by using the following text function:

text: function(chartItem, plot) { return "AC: "+plot.series[0].data[chartItem.index] + ", TV: "+plot.series[1].data[chartItem.index]; }

See also: <a href="http://jsfiddle.net/B45PW/3/" rel="nofollow">http://jsfiddle.net/B45PW/3/</a>

EDIT: In your example you are also missing the CSS needed for the tooltip to show up correctly. You need to add:

<link rel="stylesheet" href="dojoinstall/dijit/themes/claro/claro.css">

and use the claro class on your body:

<body class="claro">


<a href="http://jsfiddle.net/B45PW/4/" rel="nofollow">http://jsfiddle.net/B45PW/4/</a>


  • Is it possible to match two series of data in a chart from two different datasets in c# winforms
  • Access controls from view in content page
  • How to change textField underline color?
  • Windows form Chart label modification
  • Fixing a slow GridView
  • Apple review objection Invalid directory name for Plugins folder (Child Browser Cordova)
  • Resizing ToolStripButtons to fit complete BackGround image
  • iterparse fails to parse a field, while other similar ones are fine
  • how can i get floating imgs to fill all space
  • Remove previous Directions Route Google Maps
  • Prolog Ambiguous Output
  • Cross platform UI spacing/padding
  • jQuery .attr() and value
  • R - Combining Columns to String Based on Logical Match
  • Email format validation in mvc3 view
  • Regex thinks I'm nesting, but I'm not
  • Read text file and split every line in MSBuild
  • req.body is undefined - nodejs
  • How to get a value (ex: baseURL) in every Karate feature?
  • angularjs unit test when to use $rootScope.$new()
  • How to set/get protobuf's extension field in Go?
  • Submit form in a displaytag pagination
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Return words with double consecutive letters
  • how to add data labels for bar graph in matlab
  • How to delete a row from a dynamic generate table using jquery?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • using HTMLImports.whenReady not working in chrome
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?