https://github.com/shellyln/chart.js-node-ssr-example

Chart.js server side rendering example. (pure JavaScript; no native modules)
https://github.com/shellyln/chart.js-node-ssr-example

canvas canvas2d chart chartjs nodejs server-side-rendering ssr svg

Last synced: 2 months ago
JSON representation

Chart.js server side rendering example. (pure JavaScript; no native modules)

• Host: GitHub
• URL: https://github.com/shellyln/chart.js-node-ssr-example
• Owner: shellyln
• License: other
• Created: 2018-09-17T00:36:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-14T15:10:25.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T09:14:29.506Z (3 months ago)
• Topics: canvas, canvas2d, chart, chartjs, nodejs, server-side-rendering, ssr, svg
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/red-agate-svg-canvas
• Size: 1.18 MB
• Stars: 47
• Watchers: 3
• Forks: 8
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Chart.js server side rendering example on the node.js environment.

**Render various charts using Chart.js into the SVG format.**

Chart.js uses the HTML5 Canvas API.  

However, the node.js environment does not have the Canvas API by default.  

With [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas),

you can render the charts on the server side.

**This example uses no native modules, so it can be easily installed on various platforms.**

## Get started

```bash

$ git clone https://github.com/shellyln/chart.js-node-ssr-example.git

$ cd chart.js-node-ssr-example

$ rm -rf ./.git

$ npm install

$ npm run build

$ npm start           # run webpacked

$ npm run start:v12   # run non-webpacked ES Modules (Node.js >= 12.0.0)

$ npm run start:v14   # run non-webpacked ES Modules (Node.js >= 13.0.0)

```

## Example

```ts

import { SvgCanvas,

         Rect2D,

         SvgCanvas2DGradient } from 'red-agate-svg-canvas/modules';

// NOTE: hack bad .d.ts definition for ESM.

// import * as ChartJs from 'chart.js'; // <- This is fine if you only use webpack.

import * as ChartJs_ from 'chart.js';

const ChartJs: typeof ChartJs_ = (ChartJs_ as any).default || ChartJs_;

// Get the global scope.

// If running on a node, "g" points to a "global" object.

// When running on the browser, "g" points to the "window" object.

const g = Function('return this')();

// Chart options

// https://www.chartjs.org/docs/latest/getting-started/usage.html

const opts: any = { ... };

function main() {

    // SvgCanvas has a "CanvasRenderingContext2D"-compatible interface.

    const ctx = new SvgCanvas();

    // SvgCanvas lacks the canvas property.

    (ctx as any).canvas = {

        width: 800,

        height: 400,

        style: {

            width: '800px',

            height: '400px',

        },

    };

    // SvgCanvas does not have font glyph information,

    // so manually set the ratio of (font height / font width).

    ctx.fontHeightRatio = 2;

    // Chart.js needs a "HTMLCanvasElement"-like interface that has "getContext()" method.

    // "getContext()" should returns a "CanvasRenderingContext2D"-compatible interface.

    const el = { getContext: () => ctx };

    // If "devicePixelRatio" is not set, Chart.js get the devicePixelRatio from "window" object.

    // node.js environment has no window object.

    opts.options.devicePixelRatio = 1;

    // Disable animations.

    opts.options.animation = false;

    opts.options.events = [];

    opts.options.responsive = false;

    // Chart.js needs the "CanvasGradient" in the global scope.

    const savedGradient = g.CanvasGradient;

    g.CanvasGradient = SvgCanvas2DGradient;

    try {

        const chart = new ChartJs.Chart(el as any, opts);

    } finally {

        if (savedGradient) {

            g.CanvasGradient = savedGradient;

        }

    }

    // Render as SVG.

    const svgString = ctx.render(new Rect2D(0, 0 , 800, 400), 'px');

    console.log(svgString);

}

```

## Rendering results

### [Bar](https://www.chartjs.org/docs/latest/getting-started/usage.html)

![1](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/1.svg?sanitize=true)

### [Donut](http://www.chartjs.org/samples/latest/charts/pie.html)

![2](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/2.svg?sanitize=true)

### [Line](http://www.chartjs.org/samples/latest/charts/line/point-sizes.html)

![3](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/3.svg?sanitize=true)

### [Area](http://www.chartjs.org/samples/latest/charts/area/line-stacked.html)

![4](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/4.svg?sanitize=true)

## Notes

To import the [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas), ~~you need to use `babel` + `webpack`.~~  

(We have used the `import` statements for doing the [tree-shaking](https://webpack.js.org/guides/tree-shaking/). ~~The `import` statements in the `.js` not the `.mjs` files cannot import from the vanilla node.js.~~)

`red-agate-svg-canvas/modules` directory has a `package.json` file and determines that the source files are `ES Modules`.  

See [Node.js Documentation - ECMAScript Modules](https://nodejs.org/api/modules.html).