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,
},
}
Flash on Update works with Animation but defaults animation to disabled. To use both together, explicitly set animation: { 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.