What's new in AG Charts 14.3

Our latest release, AG Charts 14.3, focuses on making it easier to match your charts to your application, with a new visual Theme Builder and a significantly expanded set of theme parameters, as well as two new financial chart features: Volume Profile and the HLC Series.

Read on for demos, code snippets, and full details on what's new.

Key features

1. Theme Builder - Design a custom AG Charts theme visually in the browser against a live preview, then copy it into your application.
2. Expanded Theme Parameters - Style titles, axes, legends, series labels, scrollbars, the navigator and more from a single params object, with more than 80 new parameters.
3. Volume Profile - Show the volume traded at each price level, either alongside a Financial Chart or as a standalone chart.
4. HLC Series - Plot high, low and close values as a single series in any Cartesian chart.
5. Performance Improvements - Faster updates for large and frequently updating charts, including heatmaps, radar charts and large org charts.

Theme Builder

AG Charts 14.3 introduces the Theme Builder, a free, browser-based tool that brings the same visual workflow AG Grid users already have to AG Charts, making it even easier to style AG Charts.

Start from a preset, adjust the palette, fonts and theme parameters against a live preview, and toggle features such as the navigator, zoom, tooltips and context menu so you can style every part of the chart:

Once you're happy with the result, copy the theme straight into your application and pass it to the theme option - there's nothing new to install, as the output is a standard AG Charts theme object:

const myTheme = {
  baseTheme: 'ag-default',
  palette: {
    fills: ['#2E6BF2', '#F2994A', '#27AE60'],
    strokes: ['#1F4FBF', '#C2773A', '#1E8A4C'],
  },
  params: {
    accentColor: '#2E6BF2',
    fontFamily: 'Inter',
  },
};

Visit the Themes docs for more information, or open the Theme Builder to start building your own theme.

Expanded Theme Parameters

Alongside the Theme Builder, AG Charts 14.3 also significantly expands the set of theme parameters, so you can now style almost every element directly using theme parameters, including:

• Titles: colour, font and line height for titles, subtitles and footnotes.
• Axes: axis label and title text styling, axis and grid line widths, and band highlight colour.
• Legend: borders, padding, label text and marker size.
• Series labels: fonts, borders, and separate colours for labels inside and outside the series.
• Interactive elements: hover, active and disabled button states, the scrollbar, the navigator and the colour picker.

The parameters are organised in layers. A small set of foundation parameters, such as foregroundColor, accentColor and fontFamily, defines the overall look, and the more specific parameters inherit their values from them. This means a handful of changes can transform every element of a chart:

const myTheme = {
  params: {
    // Three foundation values restyle the whole chart
    foregroundColor: '#1B2A41',
    accentColor: '#2E6BF2',
    fontFamily: 'Inter',
  },
};

When you need finer control, set the specific parameters you want to change, or reference another parameter instead of repeating a value:

const myTheme = {
  params: {
    fontFamily: 'Inter',
    lineHeight: 1.5, // Ratio of font size
    titleFontSize: 20,
    axisLabelColor: '#666',
    gridLineWidth: 0.5,
    legendMarkerSize: 10,
    seriesLabelInsideTextColor: '#fff',
    // Reference another parameter
    buttonHoverBackgroundColor: { ref: 'accentColor' },
  },
};

The new parameters default to the values charts already use, so existing charts look exactly as before after upgrading.

Visit the Theme Parameters docs for more information.

Volume Profile

Charts of price over time show when the market moved, but not where most trading actually took place. A Volume Profile shows the volume traded at each price level as horizontal bars against the price axis - making it easy to spot the price levels where the market did most of its business, and those it moved through quickly.

AG Charts 14.3 adds support for Volume Profile, which can be displayed alongside the candlesticks of a Financial Chart, or as a standalone Volume Profile Chart. Each bar is split into up and down volume using your theme's up and down colours, with an optional total segment:

To add a Volume Profile to a Financial Chart, supply your volume-at-price data to the volumeProfile option:

AgCharts.createFinancialChart({
  data: prices,
  title: { text: 'Acme Inc.' },
  volumeProfile: {
    // One row per price level, e.g. { price: 140, upVolume: 19126307, downVolume: 25942209 }
    data: getVolumeProfile(),
    upKey: 'upVolume',
    downKey: 'downVolume',
    placement: 'right',
    totalSegment: { enabled: true },
  },
});

Alternatively, use AgCharts.createVolumeProfileChart() to display the profile on its own, with optional selection of individual price levels or drag-selection of a range.

Volume Profile is an AG Charts Enterprise feature. Visit the Volume Profile docs for more information, including how to group prices into fixed-height levels.

HLC Series

High-Low-Close (HLC) charts plot each period's high, low and closing prices, and are particularly useful when the closing price matters most, but you still want to see each period's trading range.

Financial Charts already offer an HLC chart type via chartType: 'hlc', but AG Charts 14.3 now provides a dedicated HLC Series that you can use in any Cartesian chart. It draws a line through the close values, with shaded bands reaching up to the high values and down to the low values, whilst behaving as a single series - with one legend item, one tooltip per data point, and a single set of styling options:

To create an HLC series, set type: 'hlc' and provide the high, low and close keys. Each part of the series can be styled independently via item.high, item.low and item.close:

{
  series: [
    {
      type: 'hlc',
      xKey: 'date',
      highKey: 'high',
      lowKey: 'low',
      closeKey: 'close',
      item: {
        high: { fillOpacity: 0.2, lineDash: [4, 4] },
        low: { fillOpacity: 0.2, lineDash: [4, 4] },
        close: { strokeWidth: 3, marker: { enabled: true, shape: 'diamond' } },
      },
    },
  ],
}

The HLC Series is an AG Charts Enterprise feature. Visit the HLC Series docs for more information.

Performance Improvements

In addition to the new features, this release improves update performance for large and frequently updating charts:

• Heatmaps update faster, including partial updates via transactions.
• Radar charts with polygon grids redraw faster.
• Large org charts zoom and pan more smoothly.
• Line charts receiving streaming data via updateDelta() update more consistently.

Summary

AG Charts 14.3 focuses on theming and financial analysis. This release:

• Introduces the Theme Builder, a visual tool for designing custom themes against a live chart.
• Expands theme parameters from 46 to 131, so titles, axes, legends, series labels and interactive elements can be styled from params.
• Adds Volume Profile, alongside Financial Charts via volumeProfile or standalone via createVolumeProfileChart().
• Adds a dedicated HLC series via type: 'hlc', usable in any Cartesian chart.
• Improves update performance for heatmaps, radar charts, large org charts and streaming line charts.

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:

React · Angular · Vue · JavaScript

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

Happy coding!