headless-chart

ssr-chart

Server Side Rendering charts based on ECharts and node-canvas.

Install

npm i ssr-chart

yarn add ssr-chart

Example

const SSRChart = require('ssr-chart');
 
const chart = new SSRChart(600, 400);
const option = {
 
};
chart.setOption(option);

API

SSRChart(width: number, height: number)

render(option: Object)

toBuffer()

toPNGStream()

toJPEGStream()

toPDFStream()

Use in Docker

FROM node:12.13.0-alpine
 
USER root
 
ARG ALPINE_VER=v3.9
# For developers in China, config mirror 
ARG ALPINE_MIRROR=http://mirrors.tuna.tsinghua.edu.cn/alpine/${ALPINE_VER}
 
# Installs node-canvas package 
RUN echo @${ALPINE_VER} ${ALPINE_MIRROR}/community >> /etc/apk/repositories \
    && echo @${ALPINE_VER} ${ALPINE_MIRROR}/main >> /etc/apk/repositories \
    && apk add --no-cache --upgrade \
    python \
    g++ \
    build-base \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    musl-dev \
    giflib-dev \
    pixman-dev \
    pangomm-dev \
    libjpeg-turbo-dev \
    freetype-dev \
    && rm -rf /var/cache/* \
    && mkdir /var/cache/apk
 
COPY ./app/package.json ./app/package-lock.json /tmp/
 
RUN cd /tmp && npm i --registry=https://registry.npm.taobao.org --production
 
RUN mkdir -p /usr/src/app && cp -rf /tmp/node_modules/ /usr/src/app/
 
WORKDIR /usr/src/app
 
EXPOSE 80
 
CMD npm start

CJK (Chinese/Japanese/Korean characters) not found ?

Register your own font.

const { registerFont } = require('canvas');
 
registerFont('font.ttf', { family: 'font-name' });