javascriptreactjszoomingreact-chartjs-2

React-chartjs-2: Reset zoom


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: Edit nice-kowalevski-zsw0h5


Solution

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