[reactjs] zoom is resetting on render

[georgbuechner]

Hey guys,

in advance: part of the reason, why I'm filing this issue is probably due to my missing knowledge of reactjs and chartjs, and I understand if that is kinda a no-go for you guys, who implemented this great plugin and are maybe annoyed by having to answer questions like this. however I did a lot of googling, but I could not find an answer or a link to the right direction. The only thing that is coming close to the problem I have is this github issue (reactchartjs/react-chartjs-2#107), where OP has the same issue but with a different graph-library

I implemented a Line-Chart in a functional component, and zooming kinda works, but as soon as the component is rendered again, the zoom resets to default (making zoom unusable). Any Idea, how to prevent this behavior?

I have the feeling that one option would be to safe the current zoom and then pass the current zoom to the Chart-Component in the return statement, but a) I would need some help on passing the current or stored zoom to the component, as I couldn't find any instructions on how to do that and b) it seems a bit overkill, that I need to do that, and I was hoping (and expecting) a more straight forward solution.

Here is a code snippet, I can provide the full code, if needed.

export default function HistoryGraph({history, setHistory, ...other}) {
  let { id } = useParams()
 
 const [values, setValues] = useState({
    history: ConvertValues(history);  // extracts the data-rows for each values.
    hidden: history[id].hidden  // hidden (true/ false) is stored for each data-row, to keep it when moving around in the app.
  });
  const chartRef = useRef(null);  // the ref is used to reset zoom, and potentially for adding more buttons (f.e. zoom +10% ...) 
  const [data, setData] = useState({...inital_data});]
  
  // I don't know if I really need the useEffect here. but it should be a problem anyway.
  useEffect(() => {
    let datasets = [...initial_data.datasets];
    for (let i=0; i<datasets.length; i++) {
      datasets[i].data = values.history[datasets[i].label];
      datasets[i].hidden = values.history[datasets[i].hidden];
    }
    let labels = values.history.time;
    setData({labels: labels, datasets: datasets});
  }, [values]);

  // This callback is actually updating the graph. updateHistory is either 
  // called on refresh-button-click or every time when history 
  // is updated, depending on whether life-mode is on/ off.
  const updateHistory = useCallback(() => {  
  setValues({
     history: ConvertValues(history),
     hidden: history[id].hidden,
   });
 }, [id, history]);
  
  const options = {
    plugins: {
      zoom: {
        zoom: {
          wheel: {enabled: true},
          pan: {enabled: true},
          mode: 'xy'
        },
        pan: {enabled: true: mode: 'xy'},
       }
     }
     ...
  };

  const resetZoom = () => { chartRef.current.resetZoom(); }

  return (
    <React.Fragment>
       <Button onClick={resetZoom}>Reset Zoom </Button>
       <Line ref={chartRef} data={data} options={options}/>  // is it possible to pass current zoom to the component here?
    <React.Fragment>
  );
}

[bwillem]

You're using react-chartjs-2?

The issue seems to have to do with the options object being set on every render. If the options object is set, the scales are also reset to default.

See this code in react-chart-js-2:

  chart.config.options = props.options
  chart.update()

The way react-chart-js-2 works, a new options object is being set every time state updates.

The way I've solved it is

1. Implementing my own wrapper around chartjs. It's pretty simple, use the open source library as a starting point.
2. Doing deep equality checks on the options object - only set the options when there are changes.

[georgbuechner]

Thanks for the advice. I'll consider doing it, I was kinda hoping for a simpler solution. But thank you anyway!

[deivuss331]

Hey @bwillem thanks for helpful answer. I'm wondering if you could share your implementation of the chartjs wrapper?

[kurkle]

I'm going to move this to discussion, as it seems this is an issue with react-chartjs-2

[vtarelkin]

@bwillem please share you implementation

[Andrewg1263]

I am using custom tooltip with zoom, but showing tooltip trigger render, hence reset zoom.
I found wrap options with useMemo works for me, the custom function in options also needs useCallback.

const showTooltip = useCallback(({ chart, tooltip }) => {
    if (tooltip.opacity === 0) {
      setTooltipPosition(null);
      return;
    }

    const position = chart.canvas.getBoundingClientRect();
    const top = tooltip.caretY + position.y + 5;
    const left = tooltip.caretX + position.x + 5;

    if (top === tooltipPosition?.y) {
      return;
    }
    const getActiveElementRawData = () =>
      tooltip.getContext().tooltipItems.at(-1).raw;
    console.log(getActiveElementRawData());
    setTooltipPosition({ y: top, x: left });
    setTooltipData(getActiveElementRawData());
    console.log(tooltipData);
  }, []);

const options = useMemo(
    () => ({
      plugins: {
        responsive: true,
        legend: {
          onHover: customHoverHandler,
          position: "right",
          display: true,
        },

        tooltip: {
          enabled: false,
          external: showTooltip,
        },
        zoom: {
          pan: {
            enabled: true,
          },
          zoom: {
            wheel: {
              enabled: true,
            },
            mode: "y",
          },
        },
      },

      scales: {
        y: {
          // beginAtZero: true,
          grace: "1",
        },
        x: {
          grace: "5%",
          ticks: {
            maxRotation: 90,
            padding: 10,
          },
        },
      },
    }),
    [showTooltip]
  );

[vtarelkin]

@Andrewg1263 thank you. If I am using annotation plugin with the zoom plugin and try to draw line via annotation it re-renders hence zoom is resetting. The annotation options is new every time we add line in it thus redrawing, can't figure how to handle it

[ronildo]

@Andrewg1263 were you able to figure this out? I'm having the same issue on my project.

[ShubhamSinghSanofi]

I guess the only way to do that would be to use the chart's ref and use it to update the chartRef.current.options.plugins object directly and call chartRef.current.update function post your changes. Hope that helps!

[sqlAlchemyNoob2004]

From Chart.js docs (https://www.chartjs.org/docs/latest/developers/updates.html):

"To update the options, mutating the options property in place or passing in a new options object are supported.

• If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js.
• If created as a new object, it would be like creating a new chart with the options - old options would be discarded."

Don't immutably update options or data. Instead, mutate the original objects and get a ref to the chart component with which you can manually call update.

I.e.

chartOptions.interaction.mode = "x";
chart.current.update()

[isabellachen]

Wrap the child component in a memo. e.g. export const MemoChart = memo(Chart)

Code sandbox