xr0master / chartjs-react

Tiny, written in TS, based on React hooks wrapper for Chart.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Expose chart ref?

ace-han opened this issue · comments

This element is a pure FC for the time being, sometimes we would like to access the chart instance directly.

Say, using chartjs-plugin-zoom, sometimes we would do a chartRef.resetZoom() when a reset button is clicked.

Thx

Hello. Thank you for your interest. I don’t know yet how to do this in a convenient way.
Probably need to add some kind of hook to create the instance ref and pass it as prop...

Now it is possible through your own id:

import { Chart } from 'chart.js';

onEvent = () => {
  const myChartInstance = Chart.getChart('unique-chart-id');
  myChartInstance.resetZoom();
};

const BarChart = () => {
  return (
    <ReactChart
      id="unique-chart-id"
      type="bar"
      data={chartData}
      options={chartOption}
      height={400}
    />
  );
};