wedman•10mo 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•10mo 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.

Helpful Links: Interactive islands | Fresh docs Integrations | Fresh docs A Gentle Introduction to Islands Components | Fresh

marvinh.•10mo 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•10mo 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.

marvinh.•10mo ago

Looks like the example is wrong

wedman•10mo ago

Soooo I'm not completely insane! 😅 Thank you, I guess I will have to try stuff on my own, from now on!

marvinh.•10mo ago

made a PR to fix that https://github.com/denoland/fresh_charts/pull/24

wedman•10mo ago

awesome! I found out that the documentation for that module is unavaliable. https://deno.land/x/fresh_charts@0.3.1/island.tsx

marvinh.•10mo ago

huh not sure what's up there

wedman•10mo 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!