external/ag-shared/prompts/skills/example/ag-charts/features/recent-features.md
Track the latest AG Charts capabilities to ensure gallery examples showcase cutting-edge features.
For base annotation setup, see
enterprise.md. This section covers the quick measurement overlay added in Mar 2025.
New Mar 2025 β’ Apply: 6 minutes β’ Impact: HIGH β RECOMMENDED for financial timelines
annotations: {
enabled: true,
},
initialState: {
annotations: [
{
type: 'quick-date-price-range',
start: { x: new Date('2025-01-06'), y: 98 },
end: { x: new Date('2025-01-15'), y: 112 },
text: { label: 'January rally' },
up: {
statistics: {
fillOpacity: 0.3, // Theme handles colors
},
},
down: {
statistics: {
fillOpacity: 0.15,
},
},
},
],
},
Highlights: Instant measurement of both price and time deltas with theme-aware styling and directional up/down overrides.
New Mar 2025 β’ Apply: 2 minutes β’ Impact: MEDIUM
series: [
{
type: 'line',
xKey: 'date',
yKey: 'close',
highlight: {
drawingMode: 'cutout', // or 'overlay' (default)
highlightedItem: {
strokeWidth: 3,
},
},
},
];
Use when: You want hover states to punch through dense fills ('cutout') or sit on top ('overlay').
New Mar 2025 β’ Apply: 3 minutes β’ Impact: MEDIUM
import type { AgDataTransaction } from 'ag-charts-types';
const newBars = getLatestRows();
const transaction: AgDataTransaction<(typeof newBars)[number]> = {
append: newBars,
remove: [{ quarter: '2022 Q1' }],
};
await chart.applyTransaction(transaction);
Why: Append, prepend, or remove data without rebuilding the chartβperfect for live dashboards.
New Mar 2025 β’ Apply: 5 minutes β’ Impact: HIGH
formatter: {
y: ({ value }) => [
{ text: value >= 0 ? '+' : '', fontWeight: 'bold' },
{ text: value.toFixed(1) },
{ text: ' %', opacity: 0.7 },
],
},
axes: {
x: {
type: 'time',
position: 'bottom',
label: {
formatter: ({ value }) => [
{ text: value.toLocaleString('en-US', { month: 'short' }) },
{ text: ` ${value.getFullYear()}`, opacity: 0.6 },
],
},
},
};
Scope: Works for axes, labels, navigator mini-chart labels, and chart-level captions.
New Mar 2025 β’ Apply: 4 minutes β’ Impact: MEDIUM
axes: {
y: {
type: 'number',
position: 'left',
crossAt: {
value: 0,
sticky: true, // Keep origin locked to the plotted domain
},
},
x: {
type: 'time',
position: 'bottom',
crossAt: { value: new Date('2025-01-01') },
},
};
Use for: Center-origin charts, quadrant layouts, and custom axis intersections without manual offsets.
New Jan 2025 β’ Apply: 8 minutes β’ Impact: HIGH β RECOMMENDED
// Style different segments of a series with different colors/patterns
series: [
{
type: 'bar',
segmentation: {
enabled: true,
key: 'y', // Segment by y-axis values
segments: [
{
start: 0,
stop: 50,
// Don't set fill/stroke - theme handles segment colors
},
{
start: 50,
stop: 100,
// Different theme color automatically applied
},
{
start: 100,
// Extends to domain end
// Another theme color automatically applied
},
],
},
},
];
Replaces: Complex itemStyler logic for value-based coloring, manual data splitting
New Jan 2025 β’ Apply: 6 minutes β’ Impact: MEDIUM
// Apply consistent styling to entire series (vs individual items)
series: [
{
type: 'line',
styler: (params) => {
// Access series-level properties
const { seriesId, seriesName, highlightState } = params;
if (highlightState === 'highlighted-series') {
return {
strokeWidth: 3,
// Don't hardcode colors - let theme handle it
};
}
return {}; // Use defaults when not highlighted
},
},
];
Replaces: Repetitive itemStyler implementations, manual series state management
New Jan 2025 β’ Apply: 5 minutes β’ Impact: MEDIUM
axes: {
y: {
type: 'number', // Required
position: 'left',
label: {
itemStyler: (params) => {
const { value, formattedValue } = params;
// Style specific labels differently
if (value === 0) {
return {
fontWeight: 'bold',
// Don't set color - theme handles contrast
};
}
return {};
},
},
},
};
Replaces: Complex label formatter workarounds, custom label rendering
New Jan 2025 β’ Apply: 6 minutes β’ Impact: MEDIUM
series: [
{
type: 'pie',
calloutLine: {
itemStyler: (params) => {
const { datum, angleKey, value } = params;
// Emphasize high-value segments
if (value > 1000000) {
return {
strokeWidth: 2,
length: 30,
// Don't set color - theme handles callout colors
};
}
return {};
},
},
},
];
Replaces: Manual callout line customization, complex label positioning logic
New Mar 2025 β’ Apply: 6 minutes β’ Impact: HIGH
series: [
{
type: 'range-area',
xKey: 'date',
yLowKey: 'low',
yHighKey: 'high',
styler: ({ itemType }) => {
if (itemType === 'high') {
return { lineDash: [6, 3] };
}
return {};
},
label: {
enabled: true,
formatter: ({ itemType, value }) => `${itemType === 'high' ? 'High' : 'Low'}: ${value.toFixed(0)}`,
},
invertedStyle: {
fillOpacity: 0.35, // Theme picks fill color
},
highlight: {
series: {
item: {
strokeWidth: 2,
},
},
},
},
];
Takeaway: Use styler, itemType aware label callbacks, and invertedStyle to emphasise band flips without resorting to manual fills.
New Mar 2025 β’ Apply: 5 minutes β’ Impact: MEDIUM
series: [
{
type: 'range-bar',
xKey: 'task',
yLowKey: 'start',
yHighKey: 'finish',
direction: 'horizontal',
cornerRadius: 8,
styler: ({ highlightState }) => (highlightState === 'highlighted-item' ? { strokeWidth: 2 } : {}),
label: {
enabled: true,
placement: 'outside',
formatter: ({ itemType, value }) => `${itemType === 'high' ? 'Finish' : 'Start'}: ${value}`,
},
},
];
Why: Dedicated stylers and label params replace brittle tooltip hacks for Gantt-style visuals.
New Mar 2025 β’ Apply: 6 minutes β’ Impact: MEDIUM
series: [
{
type: 'box-plot',
xKey: 'group',
yNameKey: 'label',
styler: ({ highlightState }) => (highlightState === 'highlighted-item' ? { strokeWidth: 3 } : {}),
cap: { strokeWidth: 2 },
whisker: { strokeWidth: 1 },
legendItemName: 'Distribution',
},
];
Benefit: Fine-tune caps/whiskers and share legend entries across grouped series.
New Mar 2025 β’ Apply: 4 minutes β’ Impact: MEDIUM
theme: {
overrides: {
histogram: {
series: {
areaPlot: true,
binCount: 20,
aggregation: 'sum',
},
},
},
},
Use: Move bin configuration into theme.overrides so multiple histogram instances stay in sync.
New Mar 2025 β’ Apply: 5 minutes β’ Impact: MEDIUM
series: [
{
type: 'radar-line',
angleKey: 'metric',
radiusKey: 'score',
styler: ({ highlightState }) => (highlightState === 'highlighted-item' ? { strokeWidth: 4 } : {}),
highlight: {
series: {
item: { strokeWidth: 3 },
},
},
},
];
Outcome: Polar charts now share the same styler/highlight APIs as cartesian seriesβleverage them for interactive dashboards.
New Mar 2025 β’ Apply: 3 minutes β’ Impact: MEDIUM
series: [
{
type: 'range-area',
legendItemName: 'Projected Range',
},
{
type: 'line',
legendItemName: 'Projected Range', // Shares toggle with range area
showInLegend: true,
},
];
chart.addEventListener('legendItemClick', ({ itemId, enabled }) => {
console.log('Legend toggled', itemId, enabled);
});
Goal: Synchronise multiple series under one legend toggle and react to legend events using the new name.
New Mar 2025 β’ Apply: 6 minutes β’ Impact: HIGH
series: [
{
type: 'sankey',
sort: 'descending', // 'data', 'ascending', 'descending', 'auto'
node: {
spacing: 24,
minSpacing: 12,
alignment: 'center',
verticalAlignment: 'center',
label: {
placement: 'right',
edgePlacement: 'outside',
},
},
},
];
Result: Control spacing, alignment, sorting, and label placement without custom layers.
New Mar 2025 β’ Apply: 4 minutes β’ Impact: HIGH
const chart = AgCharts.createFinancialChart({
// ...base options
ranges: {
buttons: [
'1W',
'1M',
{ type: 'fixed', count: 90, label: '90D' },
{ type: 'callback', label: 'YTD', callback: ({ setRange }) => setRange('yearToDate') },
],
},
});
Best for: Tailoring toolbars to analyst workflows (earnings windows, YTD, custom presets).
For base zoom setup, see
enterprise.md. This section covers the data-change strategy added in Nov 2024.
New Nov 2024 β’ Apply: 3 minutes β’ Impact: MEDIUM
zoom: {
enabled: true,
onDataChange: {
strategy: 'preserveDomain', // 'reset' | 'preserveDomain' | 'preserveRatios'
},
}
Strategy Options:
'reset': Reset zoom to show all data when data changes'preserveDomain' (default): Keep current zoom domain when data changes'preserveRatios': Adjust zoom to fit new data range while maintaining zoom levelUse for: Live data updates where you want to control how zoom behaves when new data arrives.
New Nov 2024 β’ Apply: 5 minutes β’ Impact: MEDIUM
series: [
{
type: 'treemap',
sizeKey: 'value',
labelKey: 'name',
styler: (params) => {
const { highlightState } = params;
// Differentiate between directly hovered items and branch items
if (highlightState === 'highlighted-item') {
return { strokeWidth: 3 }; // Directly hovered
}
if (highlightState === 'highlighted-branch') {
return { strokeWidth: 2, opacity: 0.8 }; // Same branch
}
if (highlightState === 'unhighlighted-branch') {
return { opacity: 0.3 }; // Different branch
}
return {};
},
},
];
Available States:
'highlighted-item': The directly hovered node'highlighted-branch': Nodes sharing the same root branch as the hovered item'unhighlighted-branch': Nodes in different branches'unhighlighted-item': Other items not in the hovered branch'none': Default stateUse for: Treemap and sunburst charts where you want to highlight related nodes in the same hierarchy branch.
New Nov 2024 β’ Apply: 4 minutes β’ Impact: MEDIUM
series: [
{
type: 'bar',
xKey: 'category',
yKey: 'volume',
xKeyAxis: 'category', // Default: 'x'
yKeyAxis: 'volume', // Bind to volume axis
},
{
type: 'line',
xKey: 'category',
yKey: 'price',
xKeyAxis: 'category', // Same x-axis
yKeyAxis: 'price', // Bind to price axis
},
],
axes: {
category: { type: 'category', position: 'bottom' },
price: { type: 'number', position: 'left' },
volume: { type: 'number', position: 'right' }, // Secondary axis
}
Use for: Multi-axis charts where different series need to be bound to different axes, or polar charts with multiple angle/radius axes.
New Dec 2024 β’ Apply: 3 minutes β’ Impact: Low β GENERALLY AVOID
// β οΈ ONLY use if you MUST override ALL fonts globally
// β PREFER letting theme handle fonts automatically
theme: {
params: {
// β AVOID setting fontSize - breaks theme consistency
// β AVOID setting fontWeight - unnecessary
foregroundColor: '#333333', // Only if absolutely needed
}
}
Note: Theme defaults are almost always better than manual font overrides
New Dec 2024 β’ Apply: 4 minutes β’ Impact: Medium
series: [
{
marker: {
lineDash: [4, 2], // Dashed marker borders
lineDashOffset: 2,
// Don't set stroke - use theme colors
strokeWidth: 2,
},
// Use the newer highlight options instead of deprecated highlightStyle
highlight: {
highlightedItem: {
// Don't hardcode colors
strokeWidth: 3,
},
},
},
];
Replaces: Simple solid marker borders, custom marker implementations
For base zoom setup, see
enterprise.md. This section covers the aspect-ratio control added in Dec 2024.
Enterprise β’ New Dec 2024 β’ Apply: 6 minutes β’ Impact: Medium
zoom: {
enabled: true,
enableSelecting: true,
keepAspectRatio: true, // Maintain chart proportions during zoom selection
}
Replaces: Manual aspect ratio calculations in zoom implementations
New Dec 2024 β’ Apply: 5 minutes β’ Impact: Low
listeners: {
seriesVisibilityChange: (event) => {
const { itemId, legendItemName, visible } = event;
console.log(`${legendItemName} (${itemId}) is now ${visible ? 'visible' : 'hidden'}`);
},
}
Replaces: Manual series state tracking and visibility detection
New Nov 2024 β’ Apply: 2 minutes β’ Impact: Medium
data: getData(),
suppressFieldDotNotation: true, // Improves performance for complex nested data
Replaces: Manual data flattening and performance optimization workarounds
New Aug 2024 β’ Apply: 8 minutes β’ Impact: High
// Replace manual center text with native inner labels
innerLabels: [
{
text: 'Total Sales',
// β Don't set fontSize/fontWeight - theme handles it
// Don't set color - theme handles contrast
},
{
text: '$1.2M',
// β Don't set fontSize/fontWeight - theme handles it
// Don't set color - theme handles contrast
},
];
Replaces: Manual HTML overlays or canvas text drawing
New Jul 2024 β’ Apply: 5 minutes β’ Impact: VERY HIGH β
// DECISION GUIDE FOR LEGEND POSITIONING:
// For MULTI-SERIES charts (consider floating with verification):
legend: {
position: 'bottom', // Safe default
// OR if space permits and verified:
position: 'top-right',
border: {
enabled: true, // ALWAYS add border for floating
strokeWidth: 1,
},
cornerRadius: 8,
padding: 12,
}
Replaces: Complex CSS positioning and manual legend placement
New Jun 2024 β’ Apply: 6 minutes β’ Impact: HIGH β RECOMMENDED
// Professional alternating bands - STRONGLY consider using this!
gridLine: {
style: [
{
// Primary grid lines
strokeWidth: 1,
lineDash: [3, 3],
// Don't set stroke - theme handles grid colors
},
{
// Alternating background bands for visual clarity
strokeWidth: 0, // No line, just fill
// Don't set fill - theme provides appropriate band colors
},
],
}
Replaces: Manual background bands and custom grid implementations
New May 2024 β’ Apply: 3 minutes β’ Impact: Medium
// Context-specific usage of spacing and padding
legend: {
spacing: 16, // Between legend and chart
padding: 12, // Internal legend padding
}
Replaces: Inconsistent padding properties across components
New Apr 2024 β’ Apply: 8 minutes β’ Impact: High
tooltip: {
position: {
anchorTo: 'pointer', // 'node', 'cursor', 'pointer'
placement: ['top', 'bottom'], // Fallback order
xOffset: 10,
yOffset: -10,
constraints: 'never-flip', // 'flip-on-overflow'
},
wrapping: 'hyphenate', // 'normal', 'break-word', 'anywhere'
}
Replaces: Manual tooltip positioning calculations and HTML-based tooltips
New Mar 2024 β’ Apply: 10 minutes β’ Impact: Medium
fill: {
type: 'pattern',
pattern: 'forward-slanted-lines', // New stock patterns
// Don't set fill/backgroundFill - theme handles pattern colors
scale: 1.5,
rotation: 45,
}
Replaces: Custom SVG pattern definitions and manual pattern creation
For base crosshair setup, see
enterprise.md. This section covers label enhancements added in Feb 2024.
Enterprise β’ New Feb 2024 β’ Apply: 7 minutes β’ Impact: Medium
crosshair: {
label: {
enabled: true,
xOffset: 5,
yOffset: -5,
renderer: (params) => ({
text: `${params.value}`,
// Don't set color/backgroundColor - theme handles crosshair styling
opacity: 0.9,
}),
},
}
Replaces: Manual crosshair label positioning and custom hover indicators
New May 2023 β’ Apply: 5 minutes β’ Impact: High
animation: {
enabled: true,
duration: 1200, // Animation duration in milliseconds
}
// Works across all series types with different entrance effects
Replaces: Static chart loading and manual animation implementations
New May 2023 β’ Apply: 8 minutes β’ Impact: Medium
axes: {
y: {
type: 'number', // Required
position: 'left',
title: {
formatter: (params) => {
const { defaultValue, boundSeries, domain } = params;
return `${defaultValue} (${boundSeries.length} series)`;
},
},
},
};
Replaces: Static axis titles and manual title generation logic
New Apr 2023 β’ Apply: 4 minutes β’ Impact: Low
axes: {
x: {
type: 'category', // Required
position: 'bottom',
label: {
// β Don't set fontSize - theme handles it
rotation: 0, // Keep horizontal when possible (if needed)
// β Don't set fontFamily - breaks consistency
// Don't set color - theme handles label colors
},
},
};
Note: Only use rotation if labels truly overlap, otherwise leave default
New Feb 2023 β’ Apply: 3 minutes β’ Impact: Medium
seriesAreaPadding: {
top: 20,
right: 20,
bottom: 20,
left: 20,
}
// Provides breathing room around the chart data area
Replaces: Manual margin calculations and CSS-based spacing
New Feb 2023 β’ Apply: 6 minutes β’ Impact: Medium
series: [
{
nodeClickRange: 'nearest', // 'exact', 'nearest'
nodeClickRangeParams: {
distance: 15, // Pixel tolerance for clicks
},
},
];
Replaces: Complex hit-testing logic and manual click area calculations
New Mar 2023 β’ Apply: 7 minutes β’ Impact: Low
series: [
{
listeners: {
nodeDoubleClick: (event) => {
console.log('Double clicked:', event.datum);
// Custom double-click behavior
},
},
},
];
Replaces: Manual double-click detection and timing logic
# In repository root, analyze recent ag-charts-types changes
git log --format="%h %ad %s" --date=short --since="3 months ago" -- "packages/ag-charts-types/" | head -30
# Look for feature additions in community package
git log --format="%h %ad %s" --date=short --since="3 months ago" -- "packages/ag-charts-community/" | grep -E "(add|Add|new|New)" | head -20
Feature Discovery:
packages/ag-charts-types/src/Validation Requirements:
Use this format:
### π― Feature Name
_New MMM YYYY β’ Apply: X minutes β’ Impact: High/Medium/Low_ _(Enterprise if applicable)_
\`\`\`typescript
// Clear, working example
const chart = AgCharts.create({
// Feature-specific properties
});
\`\`\`
_Replaces: What manual implementations this native feature can replace_
packages/ag-charts-types/src/When updating examples, prioritize:
Remember: The goal is to demonstrate AG Charts' latest capabilities while maintaining clean, professional examples.