options changes not seen in react chartjs 2

Question

I have a problem to update the options of a chart in react-chartjs-2, precisely in the dragData plugin of chartjs

I have the dragData activated for the graph, that part works, the graph allows you to drag the data. The problem occurs when I click the button to disable the drag option, the graph does not work, it still allows dragging the values.

apparently in the console the options of the graph change but it is not reflected in the interaction of the graph, I leave the code in the following link.

useEffect(() => {
  if(props.state === true){
    let ref = chartReference.current.chartInstance;
      ref.options.dragData = false;
      ref.update();
  }else {
    let ref = chartReference.current.chartInstance;
    ref.options.dragData = true;
    ref.update();
  }
}, [props.state])

working code

Please copy/paste the relevant code -- the useEffect() hook and the call to the chart component. If they are in the same component, then maybe paste the whole component. But asking folks to decode your entire codebase is a bit much. — Michael Landis, Mar 29 '20 at 23:39

score 0 · Accepted Answer · answered Mar 30 '20 at 02:58

0

According to this thread the problem can still exist in this library.

Beside obvious option to shorten code ...

useEffect(() => {
  let ref = chartReference.current.chartInstance;
  ref.options.dragData = !props.state;
  ref.update();
}, [props.state])

... it looks like you have to somehow force redraw/rerendering.

One of option is to change entire options prop passed to <Line />. You can use useState to keep this config object - of course with moving initial state:

const [chartOptions, setChartOptions] = useState(
    {
      onDragEnd: handleDrag,
      dragData: true,
      dragDataRound: 0,
      ...

useEffect to react on prop.state changes:

useEffect(() => {
  setChartOptions(Chart.helpers.configMerge(chartOptions, {
    dragData: !props.state
    })
  );
}, [props.state])

<Line /> chart required changes:

  <Line
    ref={chartReference}
    data={data}
    height={30}

    options={chartOptions}

    redraw={true}
  />

working example

Of course you can use props.state value in initial state... also think about renaming state prop, it can be at least missleading ... especially when you'll convert this component to class.

answered Mar 30 '20 at 02:58

xadm

8,219
3
14
25

It's from dependencies ... you can declare it explicitly by `import { Chart } from 'react-chartjs-2';` – xadm Mar 30 '20 at 06:14
Then import it directly from Chart.js (like https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L3) ... source https://github.com/chartjs/Chart.js/blob/master/src/index.js – xadm Mar 30 '20 at 06:39
I get error, cannot acces 'handleDrag' before initialization. – JUAN FERNANDO NARVAEZ GALLEGO Mar 30 '20 at 06:59
by additional imports? ... remove them ... it should work without that .... you can try to use `window.Chart.helpers...` - it's declared here: https://github.com/chartjs/Chart.js/blob/master/src/index.js#L58 – xadm Mar 30 '20 at 07:09
hmmm, something wrong with your config if it works in codesandbox? ... you can try to use other objects deep merging function (instead of `Chart.helpers.configMerge`) - search on SO? – xadm Apr 03 '20 at 08:09

options changes not seen in react chartjs 2

1 Answers1