What's New in AG Charts 13.2

AG Charts 13.2 introduces features focused on improving integration flexibility, real-time data feedback, and accessibility:

Key Features

1. Server-Side Rendering - Render charts on the server for embedding in reports, improved performance, SEO, and initial load times.
2. Range Buttons - Quickly navigate time-based datasets with built-in range selection controls.
3. Flash On Update - Highlight changing data points to make updates immediately visible.
4. RTL Text and Layout - Full right-to-left layout support for improved accessibility and localisation.

Server-Side Rendering

AG Charts 13.2 introduces server-side rendering (SSR), enabling charts to be rendered in non-DOM environments such as Node.js. SSR is particularly useful when exporting charts as images or embedding them in backend-generated reports.

SSR also allows charts to be generated ahead of time, improving initial page load times, SEO & Core Web Vitals, and enhancing performance in static or hybrid rendering environments.

To render a chart server-side, install the ag-charts-server-side package:

npm install ag-charts-server-side

Then use the AgChartsServerSide.render() method to generate the chart, providing the same ChartOptions configuration you would use on the client side:

const buffer = await AgChartsServerSide.render({
    options: {
        data: [
            { category: 'Q1', value: 10 },
            /* Other data... */
        ],
        series: [{ type: 'bar', xKey: 'category', yKey: 'value' }],
    },
    width: 400,
    height: 300,
});

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

Visit the Server Side Rendering docs for more information, or try it in your own GitHub Codespace with our AG Charts SSR demo.

Range Buttons

Range Buttons provide a simple way to navigate time-series data by jumping between common time intervals such as days, months, or years. This is particularly useful for dense datasets, where users need to quickly focus on a specific time window without manually zooming or panning.

To enable range buttons, set ranges.enabled to true:

{
  ranges: {
    enabled: true,
  },
}

Visit the Range Buttons docs for more information.

Flash On Update

Flash On Update makes real-time data changes immediately visible by briefly highlighting updated data points. This is particularly useful for dashboards, monitoring tools, or financial charts where changes need to stand out without requiring user interaction:

When enabled, any data updates trigger a temporary visual flash on affected elements, drawing attention to changes while preserving overall chart readability.

To enable flashing, set flashOnUpdate.enabled to true:

{
  flashOnUpdate: {
    enabled: true,
  },
}

Visit the Flash on Update docs for more information.

RTL Text and Layout

AG Charts 13.2 introduces full right-to-left (RTL) support, enabling charts to render correctly for languages such as Arabic and Hebrew. This includes mirrored layouts, legend alignment, and text direction:

RTL support ensures charts are accessible and visually consistent across global applications.

To enable RTL mode, set enableRtl to true:

{
  enableRtl: true,
}

Visit the Right-to-left docs for more information.

Summary

AG Charts 13.2 focuses on performance, usability, and global accessibility. This release:

• Introduces server-side rendering for embedding charts in reports, improved performance and backend integration.
• Adds range buttons for faster navigation of time-based datasets.
• Enhances real-time data visualisation with Flash On Update.
• Provides full RTL support for internationalised applications.

As always, we welcome feedback. Enterprise customers can contact us via Zendesk; Alternatively, please submit a GitHub issue or complete our contact form.

Next steps

New to AG Charts? Get started in minutes, for free, with your favourite framework:

Considering AG Grid Enterprise? Request a free 30-day trial licence to test your application in production and get direct access to our support team.

Happy coding!