https://github.com/denoland/fresh_charts

A server-side-rendered charting library for Fresh
https://github.com/denoland/fresh_charts

charting-library chartjs charts deno fresh

Last synced: 27 days ago
JSON representation

A server-side-rendered charting library for Fresh

• Host: GitHub
• URL: https://github.com/denoland/fresh_charts
• Owner: denoland
• License: mit
• Created: 2022-10-13T07:08:01.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-17T10:47:29.000Z (7 months ago)
• Last Synced: 2024-09-30T17:46:06.906Z (about 1 month ago)
• Topics: charting-library, chartjs, charts, deno, fresh
• Language: TypeScript
• Homepage: https://fresh-charts.deno.dev/
• Size: 36.1 KB
• Stars: 138
• Watchers: 16
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-deno - fresh_chart - A server-side-rendered charting library for Fresh. (Modules / Web utils)
• awesome - fresh_charts

README

        
# fresh_charts

A charting library for Fresh based on [Chart.js](https://www.chartjs.org/),

which supports server and client side rendering.

## Usage

There are several ways to render a chart.

For server side rendering there is the JSX/TSX component `Chart` which can be

used to inline a chart on a page, and the `renderChart()` function which can be

used to respond in a handler with an SVG image.

For client side rendering there is also a JSX/TSX island component `Chart`.

### [SSR] Inline chart example

This provides a chart rendered within the router page itself.

```tsx

import { Head } from "$fresh/runtime.ts";

import { Chart } from "$fresh_charts/mod.ts";

import { ChartColors, transparentize } from "$fresh_charts/utils.ts";

export default function Home() {

  return (

    <>

      

        Example Chart

      

      


        

      

    >

  );

}

```


### [SSR] Responding as an image

This route will provide the landing page of the site, which has an image link to

a route, which will send a request to `/routes/chart.ts` to render the chart.

**/routes/index.tsx**

```tsx

import { Head } from "$fresh/runtime.ts";

import { Chart } from "$fresh_charts/mod.ts";

import { ChartColors, transparentize } from "$fresh_charts/utils.ts";

export default function Home() {

  return (

    <>

      

        Example Chart

      

      


        

      

    >

  );

}

```


**/routes/chart.ts**

```ts

import { type Handlers } from "$fresh/server.ts";

import { renderChart } from "$fresh_charts/mod.ts";

import { ChartColors, transparentize } from "$fresh_charts/utils.ts";

export const handler: Handlers = {

  GET() {

    return renderChart({

      type: "line",

      data: {

        labels: ["1", "2", "3"],

        datasets: [

          {

            label: "Sessions",

            data: [123, 234, 234],

            borderColor: ChartColors.Red,

            backgroundColor: transparentize(ChartColors.Red, 0.5),

            borderWidth: 1,

          },

          {

            label: "Users",

            data: [346, 233, 123],

            borderColor: ChartColors.Blue,

            backgroundColor: transparentize(ChartColors.Blue, 0.5),

            borderWidth: 1,

          },

        ],

      },

      options: {

        devicePixelRatio: 1,

        scales: { y: { beginAtZero: true } },

      },

    });

  },

};

```

### [CSR] Inline chart example

This provides a client side rendered and interactive chart island within the

router page itself.

**/islands/chart.tsx**

```tsx

import { Chart } from "$fresh_charts/island.tsx";

export default Chart;

```

**/routes/index.tsx**

```tsx

import { Head } from "$fresh/runtime.ts";

import { ChartColors } from "$fresh_charts/utils.ts";

import Chart from "../islands/chart.tsx";

export default function Home() {

  return (

    <>

      

        Example Chart

      

      


        

      

    >

  );

}

```


---

Copyright 2018-2023 the Deno authors. All rights reserved. MIT Licensed.