CODEWITHSUNDEEP
angulargraphchart.jsng2-charts
Akhil V
Akhil V

Reputation: 63

Ng2-charts crosshair plugin not working in Angular

I am trying to use the crosshair plugin of ng2-charts in Angular 5 application. I need to use crosshair to interpolate points. This is a demo I found in the documentation: https://chartjs-plugin-crosshair.netlify.app/samples/. In the docs, it says the plugin will allow us to use tooltip mode as "interpolate". But it is not working.

I installed the plugin via NPM and imported it in my application. Then I added the plugin option. But the plugin is not appearing. The app says module "chartjs-plugin-crosshair" is missing. Couldn't find any solution after googling for a day. I am giving the stackblitz link: https://stackblitz.com/edit/ng2-charts-crosshair-plugin

public lineChartOptions = {
    
    responsive: true,

    tooltips:{
      enabled: true,
      intersect: false,
      mode: "x" //"interpolate"
    },

    plugins:{

       crosshair:{
    
          line:{
            color:'#000',
            width: 3
          }
       }
    }
};

Upvotes: 1

Views: 1269

Answers (1)

zerocewl
zerocewl

Reputation: 12804

I updated the dependency for chart.js and the crosshair was displayed.

Working Stackblitz

Here is another Stackblitz which uses the charts-crosshair-plugin.

Upvotes: 1

Related Questions