CODEWITHSUNDEEP
d3.jsnvd3.js
Pio
Pio

Reputation: 4062

NVD3 tooltip only shows category

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.

Upvotes: 2

Views: 3457

Answers (1)

reblace
reblace

Reputation: 4195

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/

Upvotes: 3

Related Questions