D
Deno

help

Struggling with interactive FreshCharts

Wwedman10/13/2023
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.
DAHDeno AI Helper10/13/2023
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.
Mmarvinh.10/13/2023
@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 "..."?
Wwedman10/13/2023
@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
Mmarvinh.10/13/2023
Looks like the example is wrong
Wwedman10/13/2023
Soooo I'm not completely insane! 😅 Thank you, I guess I will have to try stuff on my own, from now on!
Wwedman10/13/2023
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
Mmarvinh.10/13/2023
huh not sure what's up there
Wwedman10/13/2023
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

Looking for more? Join the community!

Recommended Posts
Turso with local db fileI wanted to try out Turso's syncURL feature and for that it creates a local db file to read from andImporting local NodeJS module from DenoIs it possible to import a javascript file that has `node` imports for standart modules like `http` how I can install antd in my deno project?how I can install antd in my deno project?Deno Fresh Twind ColorsJust a message to anyone using Deno Fresh and wondering why their tailwindcss colors aren't working-Can you run Deno.serve in a pooled thread mode?is there a way in Deno to run a http request in a separate thread?How do I rerender my island after a signal change?Hi there im trying to rerender this sidebar navigation when you toggle it, making it change size and'Relative import path not prefixed' error from @types/express .d.ts file?Converting an express mjs project to deno & TS, and running into an issue using code from this exampThe requested module 'test/jsx-runtime' does not provide an export named 'jsxs'hej, I have a exported function `jsx()` stored in `jsx-runtime.ts`. I also added these `deno.json` scompiled artifact can't find deno.jsonI'm using github actions to build and publish a binary like so ``` DENO_TLS_CA_STORE=system deno comysql query is skippedHi, I have a function that should retrieve data from the database and then process and return it. ThUsing in-memory KV (sqlite) in productionIs it ok to use the KV backed by a local SQLite database in production ? If not, could you explain wdeno.land servers not reachable / timeoutFor the past few days, I've been encountering timeouts when trying to load modules from deno.land/x.I want to install styledComponents in my deno projectsomeone could help me?: deno run -A npm:styled-components -i error: package 'styled-components' did Preact hooks doesn't get executed!im having a little problem, the hooks from preact doesn't seem to run, canst see any errors in the tDeployment fails with "An internal server error occured" - no further detailsMorning, I receive the mentioned message without any pointers of what the issue could be. The issueWhy was Preact used for Deno Fresh instead of Superb Vue.js?I am curious as to why is all.Sentry - monkey patching globals?I'm working with Sentry to release a Deno SDK. To capture breadcrumbs and tracing for console/fetchWhats the CPU time limit for queue worker processes running on Deno Deploy ?There is a CPU time limit for request. Is there any limit for the new KV queue ?Using Deno runtime as a v8 isolate runnerDeno is awesome, not just the end product but also the core runtime. I've spend the past couple of wCannot find moduleI tried importing '../api/index.js' but got the error 'module not found', I knew this error would ap