Any viable ways to render React chart library like "react-chartjs-2" in combination with this plugin?

[brklntmhwk]

First, thank you for this cool plugin! Codes get more stylish and simpler with it.

Issue

I've been trying to develop a system where you select values in an input form and submit them and then render a radar chart with them used as the data. To make it happen, I tried some react chart libraries such as react-chartjs-2 and recharts by importing them via skypack CDN, but they don't work possibly due to problems around dependencies. I was wondering if you could give me any advice or hints about this.

i.e.; Chart.md

• Only are relevant codes taken out of the original whole ones.

  
  ---
  defines-react-components: true
  ---

import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from 'https://cdn.skypack.dev/chart.js';
import { Radar } from 'https://cdn.skypack.dev/react-chartjs-2';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

const data = {
  labels: ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'],
  datasets: [
    {
      label: '# of Votes',
      data: [2, 9, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1,
    },
  ],
}

return (
  <Radar data={data} />
)
` `` 

Daily Note.md

```jsx:
<Chart />
` ``

Then you get,

Error: "radialLinear" is not a registered scale.

[m-paul]

Have you taken a look at this? https://react-chartjs-2.js.org/docs/migration-to-v4/#tree-shaking

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

[brklntmhwk]

Thank you for replying, @m-paul ! I haven't taken a look at that document, but I already tried to import the whole library like this.

import { Radar } from 'https://cdn.skypack.dev/react-chartjs-2';
import { Chart as ChartJS, registerables } from 'https://cdn.skypack.dev/chart.js';
ChartJS.register(...registerables);

That still gets me this error message:

Error in component "const HeaderComponent = pluginInternalNoteHeaderComponent; ": Error: "radialLinear" is not a registered scale.

Despite that I've registered all, it still says something is not registered. I'd be thankful if you could give me any hints of it.