wedman
wedman8mo ago

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
import { Chart as default } from "$fresh_charts/island.tsx";
import { Chart as default } from "$fresh_charts/island.tsx";
So i import the library in deno.json
"@fresh-charts/island": "https://deno.land/x/fresh_charts@0.3.1/island.tsx"
"@fresh-charts/island": "https://deno.land/x/fresh_charts@0.3.1/island.tsx"
and bellow is my /island/chart.tsx
import { Chart as default } from "@fresh-charts/island";
import { Chart as default } from "@fresh-charts/island";
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
Deno AI Helper
Deno AI Helper8mo ago
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:
import { Chart as default } from "@fresh-charts/island";
import { Chart as default } from "@fresh-charts/island";
You should have something like this:
import { Chart as ChartIsland } from "@fresh-charts/island";
import { Chart as ChartIsland } from "@fresh-charts/island";
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.
marvinh.
marvinh.8mo ago
@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 "..."?
wedman
wedman8mo ago
@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.
No description
marvinh.
marvinh.8mo ago
Looks like the example is wrong
wedman
wedman8mo ago
Soooo I'm not completely insane! 😅 Thank you, I guess I will have to try stuff on my own, from now on!
wedman
wedman8mo ago
awesome! I found out that the documentation for that module is unavaliable. https://deno.land/x/fresh_charts@0.3.1/island.tsx
No description
marvinh.
marvinh.8mo ago
huh not sure what's up there
wedman
wedman8mo ago
import { Chart } from "https://esm.sh/stable/chart.js@4.3.0/auto?target=es2022";

export default function ChartIsland() {
const xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];

new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
}
});



return (
<>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</>
)
}
import { Chart } from "https://esm.sh/stable/chart.js@4.3.0/auto?target=es2022";

export default function ChartIsland() {
const xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];

new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgba(0,0,255,1)",
data: xyValues
}]
}
});



return (
<>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</>
)
}
Just used Chart.js which fresh_chart is built on and it does the job!
No description