Search code examples
d3.jstooltipnvd3.js

NVD3 LineChart - Show tooltips only for a line


I developed a simple line chart with some css customizations.

Is there a way to show the tooltips only for a line in the chart ? I'm really frustrated about researching of documentation (NVD3 library).

<script>
d3.json("chart3.json", function(error, data) 
{
     nv.addGraph(function() 
    {
        var chart = nv.models.lineChart()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; })
            .useInteractiveGuideline(false)
            .showYAxis(false)
            .showXAxis(false)
            .showLegend(false)
            .forceY(0)
            .margin({left: 2})
            .margin({right: 2})
            .margin({bottom: 2})
            .tooltipContent(function(key, x, y, e, graph) {
            return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
        });

       chart.xAxis.tickFormat(function(d) 
      {

        return d3.time.format('%d/%m/%y')(new Date(d))
      });
chart.yAxis.tickValues([0],[1]);

        d3.select('#chart5 svg')
            .datum(data)
            .transition().duration(2500)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
});
</script>

SOLVED I added a simple If statement in the function to generate the tooltip content.

.tooltipContent(function(key, x, y, e, graph) {
                if (key ==  '1')
            return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
        });

Solution

  • SOLVED I added a simple If statement in the function to generate the tooltip content.

    .tooltipContent(function(key, x, y, e, graph) {
                    if (key ==  '1')
                return '<div id="tooltipcustom">'+'<p id="head">' + x + '</p>' +
                    '<p>' + y + ' cent/kWh/h/Runtime ' + '</p></div>'
            });