apex-charts-node

apex-charts-node

This package allows you to render Apex Charts on the server as PNG images. It's part of QuickChart, which offers a suite of tools for rendering charts & graphs as images.

Rendering takes an Apex Charts config and is made possible through the use of puppeteer, which uses the Chromium browser for "headless" rendering.

Installation

This project is available on NPM.

npm install apex-charts-node

Example

const ApexChartsNode = require('apex-charts-node');

// Build your config as you would normally
const config = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
};

// Render the chart to image
const image = await ApexChartsNode.render(drawChart, {
  width: 500,
  height: 300,
});

This produces the following image:

Usage

render(chartConfig, options) -> Buffer

The library exposes a single function, render.

chartConfig is a JSON/Javascript object that is used to define the chart. You can put any regular Apex Charts object here.

options is a dictionary containing some settings and parameters:

• width: Width of chart canvas
• height: Height of chart canvas

Note that if you specify width only, height will be automatically calculated according to the "golden ratio" 1.618, which translates roughly to a 16:10 aspect ratio.