Question

When I create a StackedColumns graph in dojo, the default tooltips show the cumulative value. I would like to show the individual value (or possibly both).

In my experience, when I have a series with first value: 2, and another with first value: 5, the tooltip shows 7 when hovering over the second series. I would like it to still show 5 (or possibly “value: 5, cumulative value: 7”).

I found the following Q&A very useful. Phillipes jsFiddle example worked for the StackedArea, but I was unable to get it to work on StackedColumns.
Dojo StackedAreas chart doesn't accept objects as values

Appreciate any help.

Here is my code:

require(["dojox/charting/Chart", "dojox/charting/axis2d/Default",  "dojox/charting/plot2d/StackedColumns", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight",   "dojox/charting/action2d/Magnify", "dojox/charting/widget/SelectableLegend", "dojo/ready"],
  function(Chart, Default, StackedColumns, Tooltip, Highlight, Magnify, SelectableLegend, ready){
    ready(function(){
      var chart1 = new dojox.charting.Chart("chart1");
      chart1.addPlot("default",{type: "StackedColumns", gap: 2});
      chart1.addAxis("x");
      chart1.addAxis("y", {vertical: true, includeZero: true});    
      chart1.addSeries("A", [2,3,5,7,2,4,6], {plot: "default", fill: "blue", stroke: {color: "blue"}});
      chart1.addSeries("C", [5,4,2,7,5,3,1], {plot: "default", fill: "green", stroke: {color: "green"}});

      var tooltip = new Tooltip( chart1, "default", {
        text : function(point) {
          console.debug(point);
          return "This is " + point.y;        
        }              
      }); 

      chart1.render();
      var clusteredColumnsLegend = new SelectableLegend({chart: chart1}, "chart1Legend");   

    });
  });

I have created a new jsFiddle @ http://jsfiddle.net/Tony_D/CqNhB/5/

Answer 1

This could maybe be considered as a bug, that said it is very easy to workaround just change your tooltip function by:

var tooltip = new Tooltip( chart1, "default", {        
  text : function(point) {
    console.debug(point);
    return "This is " + point.run.data[point.index];        
  }   
});