# chart.js-node-ssr-example

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

Latest version **1.0.9** (published 2019-02-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install chart.js-node-ssr-example
pnpm add chart.js-node-ssr-example
yarn add chart.js-node-ssr-example
bun add chart.js-node-ssr-example
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-02-09 |
| First published | 2019-01-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51 |
| Author | shellyln |
| Maintainers | shellyln |
| Keywords | Chart.js, SSR, SVG, Canvas, html5 |

## Links

- npm: https://www.npmjs.com/package/chart.js-node-ssr-example
- Repository: https://github.com/shellyln/chart.js-node-ssr-example
- Homepage: https://github.com/shellyln/chart.js-node-ssr-example#readme
- Issues: https://github.com/shellyln/chart.js-node-ssr-example/issues
- npm.io page: https://npm.io/package/chart.js-node-ssr-example

## Dependencies (3)

- [chart.js](https://npm.io/package/chart.js.md) ^2.7.3
- [red-agate-util](https://npm.io/package/red-agate-util.md) ^0.2.16
- [red-agate-svg-canvas](https://npm.io/package/red-agate-svg-canvas.md) ^0.2.16

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2019-02-09
- 1.0.7 — 2019-02-05
- 1.0.6 — 2019-02-02
- 1.0.5 — 2019-01-19
- 1.0.4 — 2019-01-19
- 1.0.3 — 2019-01-19

## 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
```


## Example

```ts
import { SvgCanvas,
         Rect2D,
         SvgCanvas2DGradient } from 'red-agate-svg-canvas/modules';
import * as ChartJs            from 'chart.js';

// 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.)

---
_Source: https://npm.io/package/chart.js-node-ssr-example · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._