Custom global plugin settings merge with built-in plugins?

[d0ublezer0]

i use Chart.js + react-chartjs-2

The goal is update my custom plugin settings when some state parameters changed.

For example, chart settings object are:

1. params object

{
interaction: {
        intersect: false,
        mode: 'nearest',
        axis: 'x',
      },
      plugins: {
        title: {
          enabled: false
        }
      }
}

2. my chart plugin

My custom plugin, registered globally is:

export const borderPlugin = { // draw border around chart area
  id: 'borderPlugin',
  afterRender: (chart, args, opts) => {
    const { ctx } = chart;
    const { options: border } = opts;

    if (border?.display) {
      const { left, top, width, height } = chart.chartArea;

      ctx.save();
      ctx.strokeStyle = border.color;
      ctx.lineWidth = border.borderWidth;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  }
};

And then I use this construction to update the border parameters, but this code is very unstable. Either it draws or it doesn't.

3. react update hook

export const usePlugins = (formatSettings) => {
  const { border } = formatSettings;

  const ref = useRef<ChartJs>(null);

  const chart: any = ref?.current;

  useEffect(() => {

    if (chart) {
      chart.options.plugins.borderPlugin.options = { ...border };
      chart.update();
    }

  }, [border, chart]);
}

return ref;

4. dilemma

But if I remove the {plugin} section from the parameters object #1, everything works fine.
I think, chartjs options object rewrite my plugin drawing after some internal update, but I can't track when this event happens

What i do wrong?

[Arantiryo]

Hi @d0ublezer0

May I ask are you passing your plugin as a prop to the chart component or just registering it globally? Also it looks like that the problem is with react-chartjs-2 so if you could file an issue there (preferably with a minimal reproduction) that would be great. Thank you!

[d0ublezer0]

Here is my example:
Unfortunately, the problem is not solved by removing the plugins section from options. But the behavior is very similar.
Only clicking on the button allows you to transfer the actual values to the plugin. Nothing happens while mounting.

https://codesandbox.io/s/focused-agnesi-f1fun1?file=/App.tsx

[Arantiryo]

Apologies for a late reply. Are you sure that link is correct? plugins.ts file is empty.

[d0ublezer0]

Hello.
There is right link: https://codesandbox.io/s/fnq6mb?file=/App.tsx
But, i think, i already found problem - initially i use ref outside from useEffect
const chart = ref.current
So, seems it woking now.