0

Can somebody tell me how to highlight only certain coordinates in a NVD3 line graph depending upon some condition like if x axis value is above 100,highlight that coordinate.

please see the image at :https://i.stack.imgur.com/AHJaK.jpg

This question or similar question has been asked , but I see no answers. Thanks in advance.

How to highlight a point on a Simple Line Chart in NVD3?

Community
  • 1
  • 1
user21
  • 64
  • 1
  • 12

1 Answers1

3

The NVD3 API doesn't allow you do to that, so you have to "hack" it and highlight the data points you're interested in yourself. The general approach is to create the circles for the relevant data points by filtering the data:

var data = d3.select('#chart svg').datum();
        d3.select('.nv-groups')
            .selectAll("circle.myPoint")
            .data(data.filter(function(d) { return d.y > 3000; }))
            .enter().append("circle").attr("class", "myPoint")
            .attr("cx", function(d) { return chart.xAxis.scale()(d.x); })
            .attr("cy", function(d) { return chart.yAxis.scale()(d.y); })
            .attr("r", 5);

Incomplete demo for the first series in the data here.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • I know this answer is incredibly old, trying to get it to do exactly what you did for the first series but for all series which are defined dinamically. More info on this issue: https://github.com/krispo/angular-nvd3/issues/295#issuecomment-333179615 Any suggestions? Thanks. – blindstuff Oct 02 '17 at 14:52