Line 3:13: 'zoom' is defined but never used no-unused-vars' while using Chartjs-2 in React.js

Question

I am making a line graph in React.js using react-chartjs-2. I am using a zoom and pan option. I imported zoom from react-chartjs-2 and used it later in my code. Note: If I remove this import line, the zoom function in the graph stop working:

import * as zoom from 'chartjs-plugin-zoom';

         <Line
            data={data}
            options={{
                title: {
                    display: true,
                    text: `${data.title}`,
                    fontSize: 20
                },
                legend: {
                    display: true,
                    position: 'right'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                pan: {
                    enabled: true,
                    mode: 'x',
                    rangeMin: {
                        x: 20,
                        y: 20
                    },
                    rangeMax: { 
                        x: 40,
                        y: 40
                    },
                    speed: 0.5
                },
                zoom: {
                    enabled: true,
                    mode: 'x',
                    rangeMin: {
                        x: 15,
                        y: 10
                    },
                    rangeMax: { 
                        x: 20,
                        y: 20
                    },
                    speed: 0.5
                }
            }}
        />

But still getting this error:

./src/components/LineGraph.jsx Line 3:13: 'zoom' is defined but never used no-unused-vars

Answer 1

Your code doesn't use the imported zoom. You have an object with a key named zoom, but nowhere do you use the imported zoom variable.

Try import 'chartjs-plugin-zoom'; instead of import * as zoom from 'chartjs-plugin-zoom'; because you just want to load the module, not reference it.