10๐
โ
2 things, you will have to register the zoomplugin as stated in the documentation by registering it either globally or inline (https://www.chartjs.org/chartjs-plugin-zoom/guide/integration.html#bundlers-webpack-rollup-etc), also your config was incorrect, the zoom option does not have an enabled
option, you will have to enable all the different zoom types appart, then it will work (https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#zoom-options)
import { Line, Chart } from "react-chartjs-2";
import React from "react";
import zoomPlugin from "chartjs-plugin-zoom";
Chart.register(zoomPlugin); // REGISTER PLUGIN
const Chart2 = (props) => {
const data = {
title: props.title,
labels: props.labels,
datasets: props.datasets
};
const options = {
maintainAspectRatio: false,
responsive: true,
elements: {
point: {
radius: 0
},
line: {
borderWidth: 1.5
}
},
scales: {
x: {
ticks: {
color: "rgba( 0, 0, 1)"
},
grid: {
color: "rgba(0, 0, 0, 1)"
}
},
y: {
min: 1,
max: 200000,
type: "logarithmic",
ticks: {
color: "rgba(0, 0, 0, 1)"
},
grid: {
color: "rgba(0, 0, 0, 1)"
}
}
},
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true // SET SCROOL ZOOM TO TRUE
},
mode: "xy",
speed: 100
},
pan: {
enabled: true,
mode: "xy",
speed: 100
}
}
}
};
return (
<div>
<Line
type="line"
data={data}
options={options}
width={900}
height={450}
/>
</div>
);
};
export default Chart2;
Codesandbox link: https://codesandbox.io/s/react-chart-js-forked-cn6wh?file=/src/components/Chart.js
Source:stackexchange.com