Skip to main content
Module

x/fresh_charts/render.ts>renderChart

A server-side-rendered charting library for Fresh
Go to Latest
function renderChart
import { renderChart } from "https://deno.land/x/fresh_charts@0.2.1/render.ts";

Render a chart, based on the configuration, returning the chart as an SVG Response.

View ChartConfiguration for information on how to configure a chart to be rendered.

import { type Handlers } from "$fresh/server.ts";
import { renderChart } from "https://deno.land/x/fresh_charts/mod.ts";
import {
  ChartColors,
  transparentize
} from "https://deno.land/x/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: { yAxes: [{ ticks: { beginAtZero: true } }] },
      },
    });
  },
};

Type Parameters

optional
TType extends ChartJs.ChartType = ChartJs.ChartType
optional
TData = ChartJs.DefaultDataPoint<TType>
optional
TLabel = unknown