showing custom tooltip for Discrete chart using nvd3

Question

I am looking for help to override default tooltip functionality for nvd3 bar (discrete) chart.

The default tooltip picks yAxis ticks and show in the tooltip.

However, in my case i don't want to show yAxis data (formatted in currency) in tooltip rather than i would like show actual yAxis value (original value without currency).

This is how i am pushing values to my data[].

@foreach (var item in Model.BarChart)
  {
    string yvalue = item.Cost== 0 ? "undefined" : item.Cost.ToString();
    string xvalue = item.Date.ToString("yyyy/MM/dd");
    @:data[0].values.push({y: @yvalue, x: '@xvalue'});
  }

I am formatting yAxis tick using the following line of code

chart.yAxis.tickFormat(function(d) { return d3.format(".1s")(d) + " USD" });

Any hint? Let me know if you need more info?

After googling, i found the following way but in this example 'y' is yAxis value and not the original value. So, how i can replace this 'y' with orginal value?

chart.tooltip(function (key, x, y, e, graph) {
                return '<p><strong>' + key + '</strong></p>' +
                '<p>' + y + ' in the month ' + x + '</p>';
            });

Turgar Turgar · Accepted Answer · 2015-05-05T00:26:07

Try e.value instead of y.

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<p><strong>' + key + '</strong></p>' +
           '<p>' + e.value + ' in the month ' + x + '</p>';
    });

e.point should also contain the original data, including any extra attributes. For example, if your input data has an "extra" attribute (like { label : "A" , value : -29.76, extra: 123 }), then you can use e.point.extra.

showing custom tooltip for Discrete chart using nvd3

1 Answers