Angular ChartsServer-Side Rendering

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.

Prerequisites Copy Link

Installation Copy Link

Install ag-charts-server-side alongside ag-charts-community:

npm install ag-charts-server-side ag-charts-community

yarn add ag-charts-server-side ag-charts-community

Module registration Copy Link

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

import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';

ModuleRegistry.registerModules([AllCommunityModule]);

Rendering a chart Copy Link

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 { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';
import { AgChartsServerSide } from 'ag-charts-server-side';

ModuleRegistry.registerModules([AllCommunityModule]);

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

Enterprise features Copy Link

To use enterprise chart types such as waterfall, heatmap, or gauges, install the ag-charts-enterprise package and register AllEnterpriseModule:

npm install ag-charts-enterprise

yarn add ag-charts-enterprise

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

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

See Enterprise Licence Key for details on obtaining and configuring a licence key.

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 { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';
import { AgChartsServerSide } from 'ag-charts-server-side';

ModuleRegistry.registerModules([AllCommunityModule]);

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);

API Reference Copy Link