tooltip & axis formatting decoupling

[milroc]

nvd3 tightly couples the axis formatting to the tooltip display format, without anyway for the developer to override it.

http://stackoverflow.com/questions/19424344/nvd3-js-yaxis-and-tooltip-different-percision is an example of this limitation for a line graph.

It is however everywhere in the nvd3 library. Was this by design?

[emwalker]

Another example that would be nice to be able to deal with would be an x-axis that shows dates in %m/%y and a tooltip that shows dates using %m/%d/%y.

[brettjonesdev]

I have also found this limitation to be rather frustrating. It would be really nice to be able to use a custom tooltip function when using interactiveGuideline: true. Unfortunately, it looks like the function which draws the default interactive guideline tooltip ( contentGenerator) is buried deep within the library, and there does not appear to be a way to override it, except by modifying the source code (no thanks!).

It would be fantastic if there were an option one could pass to override this function, much like .tooltipContent() for the non-interactiveGuideline tooltip has.

[joejansen]

+1

[fernoftheandes]

+1

[mbukosky]

+1

[atlefren]

+1

[searope]

+1

[ggviana]

+1

[vlenivenkogmail]

+1

[abratchun]

+1

[sherin]

Forked the project and added customization functionality for interactive-guideline styled tooltips. For now, this is restricted to tooltip header and line charts but I will extend it. (We needed the tooltip to show "Aug 01 5 PM - 6 PM" instead of the default x-axis format.) Hope it helps :)

https://github.com/sherinkurian/nvd3

[pedrokost]

+1

[jenslonkowski]

Another solution for me is to use the context (this) as a conditional inside the tickFormat function:

function(d) {
    // case for tooltip
    if (this === window) return ...;
    // case for axis
    return ...;
}

This is working well if you don't show the min/max values on the axes like I do. Otherwise you probably could adjust the condition.

[liquidpele]

Probably worth doing this, tagging as enhancement request.

[floribon]

+1, for now using @jenslonkowski hack. This only allows to edit the heading, a full control over the template would be highly preferable.

[jufemaiz]

Any thoughts?

When combined with using full conditional date for the xAxis it's kinda critical.

[robinfhu]

I recognize it's not obvious, but there should be a way to override that tooltip.

Try this:

lineChart.interactiveLayer.tooltip.contentGenerator( ...your function...)

[liquidpele]

lineChart.interactiveLayer.tooltip.contentGenerator( ...your function...)

Yup, I do that exact thing for the ohlcChart to override the tooltip from historicalBarChart.

[robinfhu]

PR opened.

[diaabaraka]

@jenslonkowski Nice Hack!