title: How to navigate the component from NVD3 Callback in Angular 4?
body: <p>I have implemented <code>NVD3</code> Charts in Angular 4. written an on Click event inside a callback function, on click of the chart I am trying to navigate to another component but I am unable to navigate.</p>
  
  <p><strong>Code :</strong></p>
  
  <pre><code>import { Router} from '@angular/router';
  export class MyNewComponentComponent implements OnInit {
  constructor(public router: Router)
    {
  
    }
   this.options = {
      chart: {
        type: 'discreteBarChart',
        height: 450,
        margin : {
          top: 20,
          right: 20,
          bottom: 50,
          left: 55
        },
  
        x: function(d){return d.label;},
        y: function(d){return d.value;},
        showValues: true,
        valueFormat: function(d){
          return d3.format(',.4f')(d);
        },
        duration: 500,
        xAxis: {
          axisLabel: 'X Axis'
        },
        yAxis: {
          axisLabel: 'Y Axis',
          axisLabelDistance: -10
        },
        callback: function(chart){ 
          chart.discretebar.dispatch.on('elementClick', (angularEvent,e) =&gt; {
               console.log("Inside click"); 
                              this.router.navigate(["/app-new-component2"]); 
  
  
          });
  
        }
  
      }
    }
  </code></pre>
  
  <p>}</p>
  
  <p>I am getting this error in Console. Could not able find the component reference to redirect.
  <a href="https://i.stack.imgur.com/Ivx9y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ivx9y.png" alt="enter image description here"></a></p>
  
  <p>Awaiting Suggestions. Thanks In Advance .. </p>