What's new in AG Charts 14.1

AG Charts 14.1 is our latest minor release, focused on giving you finer control over labels and providing richer interactions across the chart.

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

Key features

1. Additional label placement options - Configure label placement per series, including centre, sides and corners for marker-based series, plus beside placement and orientation options for bar series. Fallback placement arrays handle collisions and labels that do not fit.
2. Label collision avoidance - Apply fallback placement and orientation when labels collide or do not fit, with options to truncate, wrap or hide them.
3. Extended context menu scopes - Add context menus to titles, subtitles, footnotes, axes and crosslines. When overlapping elements are right-clicked, the getItems() parameters include every matching item.
4. Org chart interactivity improvements - Use the new chart direction option, expand or collapse direct and all descendants, and respond to the new collapse event. Callbacks and events now include the collapsed state and both direct and all children.
5. AI development - Use the new AI coding skill and Markdown-based documentation to provide coding assistants with more relevant AG Charts context.

Additional label placement options

AG Charts 14.1 gives every series a full set of label placements, so you can position labels where they read best instead of working around a single fixed position.

Previously, each series type offered a narrow set of positions, which meant labels on dense or awkwardly shaped data ended up overlapping their markers, spilling outside the plot, or being dropped entirely. Placement is now configured per series, and every option accepts either a single value or an ordered list of candidates that AG Charts tries in turn until one fits.

All marker-based series - line, scatter, bubble and area - accept inside to centre the label within the marker, the four sides (top, bottom, left, right) and the four corners (top-left, top-right, bottom-left, bottom-right):

{
  series: [
    {
      type: 'scatter',
      label: {
        // Ordered fallback list - the first placement that fits is applied
        placement: ['top', 'top-right', 'bottom-right', 'inside'],
      },
    },
  ],
}

Bar-family series - bar, column, waterfall, histogram and range bar - keep the inside-* and outside-* placements, which offset the label along the value axis, and add a new beside-* family that offsets it perpendicular to the value axis instead:

• beside-before-start, beside-before-center, beside-before-end
• beside-after-start, beside-after-center, beside-after-end

Bars also gain a new orientation option, which rotates the label horizontally or vertically within the segment. Like placement, it accepts an ordered fallback list:

{
  series: [
    {
      type: 'bar',
      label: {
        placement: ['inside-end', 'outside-end', 'beside-after-center'],
        orientation: ['horizontal', 'vertical'],
      },
    },
  ],
}

In this configuration, the label is tried inside the end of the bar first, then outside the end, and finally floated beside the segment - and at each step it will rotate a quarter-turn if that's what makes it fit.

Visit the Series Labels docs for more information.

Label collision avoidance

Series labels can now resolve collisions for you, so labels that don't fit are moved, reflowed or hidden, rather than left overlapping. This allows you to enable labels on busy or complex charts and still get a sensible, readable output.

This feature builds on the aforementioned label placement options: AG Charts will first try each combination of placement and orientation before falling back to wrapping, truncating, or (optionally) hiding the text:

Collision avoidance will automatically work out how to best handle label placement, rather than the user having to manually move the label.

{
  series: [
    {
      type: 'bar',
      label: {
        placement: ['inside-end', 'outside-end'],
        maxWidth: 80,
        wrapping: 'on-space',
        truncate: true,
        collision: {
          // px gap from other elements, negative values allow overlap
          threshold: 2, 
          alwaysShow: false, 
        },
      },
    },
  ],
}

Visit the Series Labels docs for more information.

Extended context menu scopes

The Context Menu now recognises three more chart elements, allowing you to attach custom actions to captions, axes and cross lines instead of only the series area, series nodes and legend.

Previously, if you were building chart-level tooling - renaming a title, switching an axis scale, editing or removing a threshold line - there was no way to add this interactivity into the chart:

The context menu showOn API now accepts three additional options:

• 'caption' - the title, subtitle or footnote
• 'axis' - any part of an axis
• 'cross-line' - a cross line's line or fill

alongside the existing 'always', 'series-area', 'series-node' and 'legend-item' values.

{
  contextMenu: {
    items: [
      'defaults',
      'separator',
      {
        showOn: 'caption',
        label: 'Edit title',
        action: (ev) => openTitleEditor(ev),
      },
      {
        showOn: 'axis',
        label: 'Toggle log scale',
        action: (ev) => toggleScale(ev.axisId),
      },
      {
        showOn: 'cross-line',
        label: 'Remove threshold',
        action: (ev) => removeCrossLine(ev),
      },
    ],
  },
}

We've also enhanced the context menu to handle overlapping chart elements, so that whenever the context menu is shown above multiple elements, the getItems() callback now includes an allShowOnParams array containing information about each element.

Visit the Context Menu docs for more information.

Org chart interactivity improvements

Org Charts, initially released in AG Charts 13.3, now provide a horizontal layout, more informative expanders, and a collapse event - making them easier to fit into real page layouts and to wire into the rest of your application:

Org charts have three new features:

• Direction: Use direction to lay the chart out vertically or horizontally, and reverse to flip which end the root sits at - so a vertical chart can grow upwards from the bottom, and a horizontal chart can grow right-to-left. Useful when the org chart has to sit alongside other page content rather than dominate it.
• Expanders: Show the number of direct children with showDirectChildren, the total number of descendants with showAllChildren, or enable both options so users know the size of an org vs. direct reports, without having to expand it.
• Collapse change events: All org chart callbacks now receive isCollapsed, allChildren and directChildren, so you can manage a collapsed card differently from an expanded one.

{
  series: [
    {
      type: 'organization',
      // Layout options
      direction: 'horizontal',
      reverse: false,
      // Collapsed labels
      expander: {
        text: {
          showAllChildren: true,
          showDirectChildren: true,
        },
      },
      // Enable expand/collapse
      node: { clickToExpand: true },
    },
  ],
  // Listen to changes in collapse state
  listeners: {
    collapsedChange: ({ collapsed, expanded }) => {
      console.log(
        'collapsed:', collapsed.map((item) => item.itemId),
        'expanded:', expanded.map((item) => item.itemId)
      );
    },
  },
}

Visit the Org Chart docs for more information.

AI Dev Skill

To help make working with AG Charts in your AI coding tools more efficient, we've introduced a new AG Charts Dev Skill - it includes a list of rules for the agent to follow to avoid common LLM pitfalls, debugging guidance, and instructions for accessing version-matched documentation to ensure that your agent uses the APIs for the installed version of the library.

Skills are installed via npm, and can be installed globally or scoped to individual projects:

npx skills add ag-grid/skills

Once installed, automatic triggering of skills by LLMs is best-effort. For the most consistent results, we recommend explicitly telling your agent to use the ag-dev skill, especially when working on complicated tasks:

Create a custom theme that applies our brand palette and axis label
formatting to every chart (use the ag-dev skill)

This sits alongside ag-update, our existing skill, which analyses your codebase against our breaking-change documentation and produces a Markdown file listing the changes needed to move to a new version:

Use the ag-update skill to update all projects in this monorepo except
apps/demo-app to ag charts v14.1

Visit the AG Skills docs for more information.

Markdown docs for AI

All of our docs pages are now available in raw markdown (.md) format, designed specifically for AI crawlers so that they can get the latest information about AG Charts without having to parse HTML pages and chew through your context windows.

We've also added a new button onto each doc page to allow you to copy the page as markdown, or open a new chat with Claude or ChatGPT referencing the docs:

Visit any docs page to access the markdown version.

Summary

AG Charts 14.1 focuses on label layout and chart interactivity. This release:

• Adds a full set of per-series label placements, including beside-* placements and label orientation for bars.
• Resolves label collisions by cascading through placement and orientation fallbacks, then wrapping, truncating or hiding.
• Extends Context Menu custom actions to captions, axes and cross lines, and exposes every overlapping element via allShowOnParams.
• Adds horizontal Org Chart layouts, child counts on expanders, and a collapsedChange event.
• Publishes a new agent skill and Markdown documentation for AI coding workflows.

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 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!