React-chartjs-2: Reset zoom

Question

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} />;
}

Live working example:

Answer 1

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>
  );
}