React ChartsServer-Side Rendering

Enterprise

The ag-charts-server-side package renders AG Charts to PNG and JPEG image buffers in Node.js, without a browser or DOM. Use it to generate chart images for email reports, PDF documents, social media cards, thumbnails, or API endpoints.

Try server-side rendering with zero setup in GitHub Codespaces. Note that in Codespaces, the server URL will be a forwarded port URL (e.g. https://<name>-3000.<domain>) rather than localhost:3000.

Prerequisites Copy Link

Server-side rendering requires Node.js 20.0.0 or later, and an AG Charts Enterprise licence.

Installation Copy Link

Install ag-charts-server-side:

npm install ag-charts-server-side

yarn add ag-charts-server-side

Module registration Copy Link

Register modules before rendering any charts. This is typically done once at application startup:

import { AllEnterpriseModule, LicenseManager, ModuleRegistry } from 'ag-charts-enterprise';

LicenseManager.setLicenseKey('your-licence-key');
ModuleRegistry.registerModules([AllEnterpriseModule]);

Rendering a chart Copy Link

Multiple render calls can safely be issued concurrently. The package serialises rendering internally to prevent global state conflicts.

AgChartsServerSide exposes static render(), renderGauge(), and renderFinancialChart() methods. Each returns a Promise<Buffer> containing the image data.

The options property accepts the same chart options as AgCharts.create(), excluding container, width, and height which are provided as top-level render options instead.

import * as fs from 'fs';

import { AllEnterpriseModule, ModuleRegistry } from 'ag-charts-enterprise';
import { AgChartsServerSide } from 'ag-charts-server-side';

ModuleRegistry.registerModules([AllEnterpriseModule]);

const buffer = await AgChartsServerSide.render({
    options: {
        data: [
            { category: 'Q1', value: 10 },
            { category: 'Q2', value: 25 },
            { category: 'Q3', value: 15 },
            { category: 'Q4', value: 30 },
        ],
        series: [{ type: 'bar', xKey: 'category', yKey: 'value' }],
    },
    width: 400,
    height: 300,
});

fs.writeFileSync('chart.png', buffer);

JPEG output Copy Link

Set format: 'jpeg' to render JPEG images. Use quality to control the compression level.

const buffer = await AgChartsServerSide.render({
    // ... chart options ...
    format: 'jpeg',
    quality: 85,
});

High-DPI output Copy Link

Set pixelRatio to produce higher-resolution images. The actual pixel dimensions of the output are width * pixelRatio by height * pixelRatio.

const buffer = await AgChartsServerSide.render({
    // ... chart options ...
    width: 200,
    height: 150,
    pixelRatio: 2,
});
// Output image is 400x300 actual pixels

Custom fonts Copy Link

AgChartsServerSide.loadFonts([
    { family: 'CustomFont', path: '/path/to/CustomFont-Regular.ttf' },
    { family: 'CustomFont', path: '/path/to/CustomFont-Bold.ttf', weight: 'bold' },
    { family: 'CustomFont', path: '/path/to/CustomFont-Italic.ttf', style: 'italic' },
]);

Example use-cases Copy Link

Express.js endpoint Copy Link

Serve chart images from an HTTP endpoint:

import express from 'express';

import { AllEnterpriseModule, ModuleRegistry } from 'ag-charts-enterprise';
import { AgChartsServerSide } from 'ag-charts-server-side';

ModuleRegistry.registerModules([AllEnterpriseModule]);

const app = express();

app.get('/chart.png', async (req, res) => {
    const buffer = await AgChartsServerSide.render({
        options: {
            data: [
                { category: 'Q1', value: 10 },
                { category: 'Q2', value: 25 },
                { category: 'Q3', value: 15 },
                { category: 'Q4', value: 30 },
            ],
            series: [{ type: 'bar', xKey: 'category', yKey: 'value' }],
        },
        width: 800,
        height: 600,
    });

    res.set('Content-Type', 'image/png');
    res.send(buffer);
});

app.listen(3000);

Getting started

Core features

Specialised Charts

Series

Gauges