CODEWITHSUNDEEP
javascriptjqueryangularjsd3.jsnvd3.js
skr07
skr07

Reputation: 725

nvd3 remove tooltip content for empty points

I am using nvd3 line chart graph and used useInteractiveGuideline: true. So all the points has plotted in tooltip for the particular date.

Here is the issue i am facing, In first & Second point have two values, so tooltip is showing legend name and the two values for the both dates and the values.

The issue is in the third date, i am having only one point in the third line but it is showing the third point value with another point value.

Graph second line ends in 7th date, but it is showing 7th date value till at the end of the graph.

I need to show only the point that has value.

So from 8th date tooltip need to show only one point in tooltip. Here is my nvd3 graph options,

  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 45,
        left: 45
      },
      duration: 500,
      useInteractiveGuideline: true,
      xAxis: {
        axisLabel: 'Time (ms)',
        showMaxMin: false,
        tickFormat: function(d) {
          return d3.format(',f')(d);
        }
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -20,
        tickFormat: function(d) {
          return d3.format(',.1f')(d);
        }
      }
    }
  };

Here is the complete demo of my code

Demo : Plunker demo

Duplicate link in this link they have passed null as point value. So it is showing N/A. But the graph is not joined. For null values it is showing empty point, show the line points are not connected. i need to connect those line and need to remove the point in tooltip or need to show N/A

Upvotes: 2

Views: 1043

Answers (1)

skr07
skr07

Reputation: 725

I have inserted a condition to verify xAxis label and the tooltip value. Tooltip only added the matched xAxis index.

I used the condition as like d.value !== p.data.x. Here p.data.x is xAxis label. d.value is tooltip label. if both the values are not matched i removed the data. In the library find the following code,

trowEnter.append("td")
            .classed("value",true)
            .html(function(p, i) { return valueFormatter(p.value, i) });

and replace it as ,

trowEnter.append("td")
              .classed("value",true)
              .html(function(p,i) {  
               if (d.value !== p.data.x) {this.parentNode.style.display = "none";}
               return valueFormatter(p.value,i) 
            });

It will remove not matched contents in the tooltip.

Upvotes: 1

Related Questions