I am using react-chartjs-2 to create a bar chart. I am also using the zoom plugin. Now I want to create a button to reset the zoom. For normal chartjs it works by calling the .resetZoom() function for the chart object. But I do not have a chart object. Is there a way to reset the zoom. Maybe with refs?
import React from "react";
import { Chart as ChartJS, registerables } from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import zoomPlugin from "chartjs-plugin-zoom";
ChartJS.register(...registerables, zoomPlugin);
let options = {
responsive: true,
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true // SET SCROOL ZOOM TO TRUE
}
},
pan: {
enabled: true
}
},
legend: {
position: "right" as const,
labels: {
font: {
size: 16
}
}
},
title: {
display: true,
text: "title",
font: {
size: 24
}
}
},
scales: {
x: {
stacked: true,
ticks: {
font: {
size: 16
}
}
},
y: {
stacked: true,
title: {
display: true,
text: "CO2-Äquivalente",
font: {
size: 16
}
},
ticks: {
font: {
size: 16
}
}
}
}
};
const labels = ["January", "February", "March", "April", "May"];
export const data = {
labels,
datasets: [
{
type: "bar" as const,
label: "Data",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(255, 99, 132, 0.5)"
},
{
type: "scatter" as let,
label: "Worst Revenue",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(70, 0, 235, 0.5)"
},
{
type: "scatter" as let,
label: "Best Revenue",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(53, 162, 235, 0.5)"
}
]
};
export function App() {
return <Bar options={options} data={data} />;
}
You could easily achieve this by using reference to your chart. In react useRef() hook is used for this.
Please see this example. I have did some changes to your code in order to make it work.
import React from "react";
import { Chart as ChartJS, registerables } from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
import zoomPlugin from "chartjs-plugin-zoom";
ChartJS.register(...registerables, zoomPlugin);
let options = {
responsive: true,
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true // SET SCROOL ZOOM TO TRUE
}
},
pan: {
enabled: true
}
},
legend: {
position: "right" as const,
labels: {
font: {
size: 16
}
}
},
title: {
display: true,
text: "title",
font: {
size: 24
}
}
},
scales: {
x: {
stacked: true,
ticks: {
font: {
size: 16
}
}
},
y: {
stacked: true,
title: {
display: true,
text: "CO2-Äquivalente",
font: {
size: 16
}
},
ticks: {
font: {
size: 16
}
}
}
}
};
const labels = ["January", "February", "March", "April", "May"];
export const data = {
labels,
datasets: [
{
type: "bar" as const,
label: "Data",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(255, 99, 132, 0.5)"
},
{
type: "scatter" as let,
label: "Worst Revenue",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(70, 0, 235, 0.5)"
},
{
type: "scatter" as let,
label: "Best Revenue",
data: [1, 2, 3, 4, 5],
backgroundColor: "rgba(53, 162, 235, 0.5)"
}
]
};
export function App() {
const chartRef = React.useRef(null);
const handleResetZoom = () => {
if (chartRef && chartRef.current) {
chartRef.current.resetZoom();
}
};
return (
<div>
<Bar ref={chartRef} options={options} data={data} />
<button onClick={handleResetZoom}>Reset Zoom</button>
</div>
);
}