Initial Load Copy Link
Switch between the different series types below to see their initial load animations. Toggling items in the legend will also animate the series in and out.
Data Updates Copy Link
A data update animation is split into three sequential phases — remove, update then add, which can be observed for different series types in this example:
Duration Copy Link
You can use the duration option to specify the length of all animations in milliseconds.
For an initial load, this is simply the duration of the whole animation.
For a data update, the duration is the total time of all three animation phases together — remove, update then add.
{
animation: {
duration: 500,
},
}
In this example, click a duration then change the series type to see the initial load animation.
Flash On Update Copy Link
Flash on Update draws attention to data changes by briefly highlighting updated, added or removed data with a flash animation. The flash runs alongside the data update animation phases.
Flash on Update is disabled by default. To enable it, set flashOnUpdate.enabled to true.
{
flashOnUpdate: {
enabled: true,
},
}
In this example:
- Click Start Updates to begin a simulated live price feed that updates the most recent candle every 2 seconds and observe the flash effect covering the entire chart.
- Click Stop Updates to pause the feed.
By default, the flash covers the entire chart area. Use the item option to control what is highlighted.
Category Flash Copy Link
Setting item to 'category' highlights individual category bands rather than the whole chart, making it easier to identify which categories have changed.
{
flashOnUpdate: {
enabled: true,
item: 'category',
},
}
In this example:
- Click Start Updates to begin a simulated data feed that updates 1–3 stock tickers' trading volumes every 2 seconds — only the changed tickers flash.
- Click Stop Updates to pause the feed.
item: 'category' requires the chart to have a category axis. If no category axis is present, a warning is logged and no flash occurs.
Live Data Updates Copy Link
Flash on Update is particularly useful for real-time data feeds, such as stock tickers or monitoring dashboards, where it draws the user's attention to the parts of the chart that have changed.
In this example:
- Click Start Updates to begin a simulated live data feed that updates 1–2 market sectors' trading activity every 2 seconds.
- Category bands flash to indicate which sectors received new data.
- Click Stop Updates to pause the feed.
Customisation Copy Link
The appearance and timing of the flash effect can be customised.
color— the colour of the flash overlay.opacity— the peak opacity of the flash.flashDuration— how long (in milliseconds) the flash holds at full opacity before fading.fadeOutDuration— how long (in milliseconds) the fade-out takes.
Setting flashDuration and fadeOutDuration introduces a two-stage effect: the flash holds at full opacity, then fades to zero.
When animations are enabled, the flashDuration and fadeOutDuration values are scaled to fit within the data update animation phase, so the actual timing may differ from the configured values. Their ratio still controls how the duration is split between the hold and fade stages. When animations are disabled, the configured values are respected as exact milliseconds.
In this example:
- Use the Colour, Flash and Fade controls to adjust the flash appearance.
- Click Start Updates to begin a simulated live price feed and observe the flash with the current settings.
- Click Stop Updates to pause the feed.