novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.23k stars 2.14k forks source link

Tooltip overriding for stackedAreaChart #849

Closed rkofman closed 9 years ago

rkofman commented 9 years ago

[Not sure if this falls more on the support request side (and belongs on StackOverflow), or if it's more of a feature refinement request. Please accept my apologies if this is the wrong forum.]

I might be doing something silly, but I'm having some trouble figuring out how to best provide custom tooltips for the stackedAreaChart. Trying to do chart.tooltips(true).tooltipContent(function(){return "foo";}) seems to fail due to scatter.interactive(false); in: https://github.com/novus/nvd3/blob/development/src/models/stackedArea.js#L29

So, I try using chart.useInteractiveGuideline(true); chart.interactiveLayer.tooltip.contentGenerator(function(){return "asdf";}), which seems to work -- but I don't get the same access to variables that I do in most chart's tooltipContent functions, such as key, x, y, e, graph. Instead I only get the formatted xValue, and a series. This makes it much harder to build a custom tooltip (my x axis formatter is destructive, so I can't guarantee being able to get back to the unformatted X value).

The only way I can see of overriding what's provided to that function is providing my own interactiveLayer to the chart, and implementing interactiveLayer.dispatch.on('elementMousemove', function(e) { to provide my own custom data to the contentGenerator function (https://github.com/novus/nvd3/blob/development/src/models/stackedAreaChart.js#L330).

Is there a simpler way? Hopefully, one that ties into the tooltipShow dispatch event... if not, I'd like to request it be added :)

robinfhu commented 9 years ago

We're in the process of revamping tooltip API. Hold off until https://github.com/novus/nvd3/pull/851

rkofman commented 9 years ago

851 will get me most of the way there (fixes regular tooltips for stackedAreaChart -- YAY!). But what do you think of passing a little more data to the interactiveGuideline's tooltip?

Right now, it's only:

{
  value: xValue,
  series: allData
}

and I'd like to propose passing in pointIndex as well, to bring it up to par with

data: d,
index: i,
color: d3.select(this).style("fill")

That gets passed to the regular tooltips.

rkofman commented 9 years ago

(I can make a quick PR with the diff, if that seems reasonable)

liquidpele commented 9 years ago

Yea, we an extend it further, but lets get this large PR merged first... hopefully today or tomorrow unless someone finds a bug.

liquidpele commented 9 years ago

Okay, it has been merged, please send up a pull request and I'll close this issue out, thanks!