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>'
});
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>'
});