Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
brklntmhwk opened this issue Mar 2, 2022 · 2 comments

Comments

@brklntmhwk
Copy link

brklntmhwk commented Mar 2, 2022

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
---

```jsx:component:Chart

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
Copy link

m-paul commented Mar 3, 2022

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants