2

I am working with stacked bar charts. How do I make the tooltip show only the category of the data, not the exact value or as an alternative is it possible to show the category not the value at the end of the bars (as if you set .showValue(true), but with the category).

UPDATE

I've found a solution for showing in the tooltip only the category (key), but it involves the modification of the source code and it does not look so nice. I think the proper name for what I want to do is to display the labels for each bar. I cannot make it work with this code:

chart.xAxis.
          .axisLabel(attrs.xAxisLabel)
          .tickFormat(d3.format('r'));

Because it gives me an error that the attrs is not defined. I've got the idea from here. But I cannot make it work.

UPDATE

To be a bit more concrete:

My chart

I want to show on the vertical axis that round_1_2, not just when I hover.

Community
  • 1
  • 1
Pio
  • 4,044
  • 11
  • 46
  • 81

1 Answers1

3

Update: Working Fiddle: http://jsfiddle.net/reblace/D2Dak/4/

There's still some issues with NVD3 code generating errors... they have the problem on their site example too... But, now the stuff I mention in here is demonstrable.

To customize the tooltip without modifying their code, try this in your code:

chart.tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
});

They expose the tooltip via a function on the multibarchart function, so you can modify the HTML template used to render the tooltip.

There's also 

chart.reduceXTicks(false);      // Will show labels on all bars
chart.rotateLabels(angle);      // Rotate the labels to "angle" degrees
chart.xAxis.staggerLabels(true) // Staggers the X Axis labels vertically so they don't run into eachother

If you look at their source code, you can find the section that exposes everything for modification:

//============================================================
// Expose Public Variables
//------------------------------------------------------------

// expose chart's sub-components
chart.dispatch = dispatch;
chart.multibar = multibar;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
...
chart.reduceXTicks= function(_) {
  if (!arguments.length) return reduceXTicks;
  reduceXTicks = _;
  return chart;
};

chart.rotateLabels = function(_) {
  if (!arguments.length) return rotateLabels;
  rotateLabels = _;
  return chart;
}

chart.tooltip = function(_) {
  if (!arguments.length) return tooltip;
  tooltip = _;
  return chart;
};

Mike Bostock describes a design pattern in "towards reusable charts" that NVD3 follows, so it might be of benefit to familiarize yourself with it. http://bost.ocks.org/mike/chart/

reblace
  • 4,115
  • 16
  • 16
  • Your solution for the tooltip works very nicely. Though I think we have different versions of nvd3, since I cannot find `reduceXTicks` method. – Pio Sep 27 '13 at 19:55
  • The one I reference is the latest on their site. The one that's on their site right now has issues, but I have it working on a project with a copy of NVD3 I dl'd a couple weeks ago. Check out the fiddle for working examples. I'm not sure when they added a bunch of these options, I was using NVD3 about a year ago and it didn't support these things. But, the good news is I was able to upgrade versions pretty seamlessly. – reblace Sep 27 '13 at 20:08