Struggling with interactive FreshCharts
Hi there I'm trying to display charts in my fresh js project. i want to have them as islands according to the github repo https://github.com/denoland/fresh_charts the /islands/chart.tsx should look like this
So i import the library in deno.json
and bellow is my /island/chart.tsx
But i get a error: Identifier expected. they have little showcase here
https://fresh-charts.deno.dev/
What am I doing wrong?? 🙂
GitHub
GitHub - denoland/fresh_charts: A server-side-rendered charting lib...
A server-side-rendered charting library for Fresh. Contribute to denoland/fresh_charts development by creating an account on GitHub.
9 Replies
Hello! 🦕
Based on the documentation, it seems like there might be a small issue with your import statement in your
/islands/chart.tsx
file.
In JavaScript and TypeScript, default
is a reserved keyword and cannot be used as a variable name. When you're importing a default export from a module, you should assign it to a variable with a different name.
So, instead of this:
You should have something like this:
Then, you can use ChartIsland
in your code wherever you need to refer to the imported module.
I hope this helps! Let me know if you have any other questions.@wedman
import { Chart as default }Â from "..."
is not valid JavaScript. Specifically the Chart as default
is invalid. Did you meant to write import Chart from "..."
or if you wanted to re-export it something like export {Â default as Foo } from "..."
?@marvinh. This is their example on the github page. I am quite new to JavaScript so im having a hard time understanding their README file, and how to use the library.
Looks like the example is wrong
Soooo I'm not completely insane! 😅
Thank you, I guess I will have to try stuff on my own, from now on!
made a PR to fix that https://github.com/denoland/fresh_charts/pull/24
awesome! I found out that the documentation for that module is unavaliable. https://deno.land/x/fresh_charts@0.3.1/island.tsx
huh not sure what's up there
Just used Chart.js which fresh_chart is built on and it does the job!