Dojo StackedColumn tooltips

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/

score 3 · Accepted Answer · answered Dec 05 '12 at 09:12

3

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];        
  }   
});

answered Dec 05 '12 at 09:12

Christophe

736
5
15

Thanks Christophe. Works like a charm. Although to be honest I don't understand what 'point' is. Is it a dojo or js object? Any ideas where I could find some doco on it. Have had a quick look and come up empty (as I'm unsure what to search for). Thanks again. – Tony Dec 05 '12 at 23:24
Well, I kept the "point" naming because you already had it, but it is actually "an event object" that contains several interesting information about the point your are hovering. Unfortunately I'm not sure there is doc about that, you can look into the plots source code to see what you can find in there. – Christophe Dec 10 '12 at 08:53

Dojo StackedColumn tooltips

1 Answers1