Facing issues in using chartjs react library in fdk cli

App Platform
,
1

I am using Chartjs react library cdn link in index.html and using HorizontalBar component in js file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

I am rendering the HorizontalBar component in the following way in one of the js file.

render() {
    return (
          <HorizontalBar   
    );
  }

but it is showing the following error

Screenshot (31)
Screenshot (31)1920×1080 231 KB

I would like to know how we can include or use the HorizontalBar component as it is a part of react-chartjs lib

1 Like
4

@Rashmi7653 - Welcome to the community :tada:

Although I lack some React skills, I have requested one of our relavant teams to get back to you with your query. Hoping that it might help you make some progress please refer to this sample app

Just to clarify, Can you confirm if this works as fine without CLI ?

3 Likes
5

I referred this sample app and built the application and yes it works fine without cli.

1 Like
7

hey @Rashmi7653,

if my understanding is correct, you can make chart.js work with the CDN version of the react but with the CLI version, the chart.js doesn’t work?

1 Like
8

In react app chart.js is working fine and I used the cdn version of react chart.js and tried to build it in cli, but it is not working in cli.

9

@Rashmi7653,

It might be due to the reason that the interface exposed by chart.js are not loaded when the react app loads, could you try loading the chart.js CDN using useEffect() hook after the app loads.

1 Like
10

okay thank you… i will try once.

11

I tried with the useEffect() also, but it is not working.

12

@Rashmi7653
Could you please send the useEffect() snippet so I can take a look?

13

React.useEffect(()=>{
fetchData();
updateChart();
}, )

14

Hey @Rashmi7653,

Could you try something like given in the below script, and let us know if it works.

  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<h3>App is loading</h3>)

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://static.freshdev.io/fdk/2.0/assets/fresh_client.js';
    script.addEventListener('load', () => setLoaded(true));
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then((client) => {
      setChild((<YourComponent props={props} />))   
    })
  }, [loaded])

Hope this helps!

Stay Safe :slight_smile:

1 Like
16

Thank you…i will try and let you know