ToolTip not displayed in nvd3 charts(Bar chart)

0
votes

I am using nvd3 chart library to display reports in our application.I have tried to display bar chart using nvd3 library..Everything working fine except the tooltip.I didnt get the tooltip in mouse-hover function.I cant figure it out where am going wrong..Pls help me to resolve this issue. Script is provide below,

function BarChart(chartData, chartid) {
    var seriesOptions = [];

    for (var i = 0; i < chartData.length; i++) {
       seriesOptions[i] = {
                key: chartData[i].Name,
                values: eval("[" + chartData[i].Value + "]")
            };
    }

    nv.addGraph(function () {

        var chart = nv.models.multiBarChart().color(d3.scale.category10().range());

        chart.xAxis.tickFormat(d3.format(',.2f'));
        chart.yAxis.tickFormat(d3.format(',.2f'));        

        d3.select('#chartcontainer1 svg')
              .datum(seriesOptions)
              .transition()
              .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

}
2
nvd3.js

2 Answers

1
votes

You can call (and personalize) the tooltip by calling the tooltip function, something like this:

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

In your example, you can insert it just before the return chart; line.

0
votes

I had a similar issue with the lineWithFocusChart and my problem was the libraries which I installed using Bower didn't work for tooltips. Once I linked to the libraries given on nvd3's live example it worked.

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">

<script src="http://nvd3.org/js/lib/jquery.min.js"></script>
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>