Animating and Smoothing Live Charts in Unreal Engine 5

The problem with feeding live data into a chart

If you push a fresh sample into a chart every frame, the default result is harsh: each new point snaps into place, the axis range jumps to fit, and the whole line jitters as values arrive. For an in-game performance overlay or a stats screen that updates in real time, that visual noise reads as a bug even when the data is perfectly correct.

What you actually want is an Unreal Engine animated smooth line chart in real time, where each incoming value eases into position and the curve stays readable while it scrolls. Fast Chart Widgets handles this entirely in Slate through its UFastChartWidget, with no per-project drawing code. The behaviour comes from two separate systems: animation (how a value moves to its new position) and smoothing (how the line between points is drawn). Understanding the difference is the key to a clean live chart.

Point animation versus curve blending

Animation in Fast Chart Widgets is governed by the EFastChartAnimationSmoothingMode enum, which has three settings. 'Disabled' turns animation off entirely, so points appear instantly. 'Animate Latest Point' tweens only the newest sample into place, which is the right choice for a streaming feed where you add one point at a time and want the leading edge of the line to glide in. 'Blend Entire Curve' animates the whole series toward its new shape, which suits cases where you replace or bulk-update the dataset and want the chart to morph rather than redraw abruptly.

Animation is gated by the widget's bEnablePointAnimation flag, so set that to true before you expect any tweening. As a rule of thumb, reach for 'Animate Latest Point' when you are calling AddDataPoint repeatedly on a live series, and 'Blend Entire Curve' when you swap datasets wholesale via the multi-dataset API.

Series smoothing modes

Smoothing is a different axis of control, exposed through EFastChartSeriesSmoothingMode with three options: 'None', 'Optimized' and 'Full'. This setting decides how the line is drawn between your data points, not how it animates. 'None' connects points with straight segments, giving you a faithful, angular polyline. 'Optimized' and 'Full' produce a curved line instead, trading exactness of the segment-to-segment path for a softer, more polished read.

For a real-time line chart, smoothing and animation work together: 'Animate Latest Point' eases the new sample in, while a curved smoothing mode keeps the connecting line elegant as it moves. If your data carries meaning in its sharp transitions, such as a frame-time spike, prefer 'None' so you do not round away the very detail you are trying to surface. Pick smoothing for aesthetics, animation for motion, and tune them independently.

Animation duration and a scrolling window

The feel of the motion comes down to AnimationDuration, a value on the widget that accepts a range of 0 to 2 seconds. Short durations near a quarter of a second feel responsive and keep up with a fast feed; longer durations toward the upper end feel deliberate and cinematic but can lag behind data that arrives more often than the animation completes. Match the duration to your sample rate so each tween finishes before the next point lands.

A live chart also needs to stop growing forever. MaxVisibleDataPoints caps the visible window, so once the series exceeds that count the chart shows only the most recent points and the older data scrolls off the left. Combined with 'Animate Latest Point', this produces the classic monitoring look: new values ease in on the right while the window slides, giving you a stable, readable real-time graph instead of an ever-shrinking line crushed to fit thousands of samples.

A practical setup looks like this. 1. Add a UFastChartWidget to your UMG canvas, or drop a pre-styled one using the Chart Template Marketplace button the editor adds to the Widget Blueprint toolbar. 2. Set bEnablePointAnimation to true and choose 'Animate Latest Point' as the animation smoothing mode. 3. Choose a series smoothing mode of 'Optimized' or 'Full' for a soft curve, or 'None' to preserve spikes. 4. Set AnimationDuration to suit your update rate, and set MaxVisibleDataPoints to the window length you want to keep on screen. 5. Drive the chart by calling AddDataPoint with your X and Y values as data arrives, and let the widget animate and scroll for you.

Where the data comes from

For engine telemetry you do not even need an external source: a template DataAsset can auto-collect metrics such as FPS, FrameTime, Memory, GameThreadTime, RenderThreadTime and GPUTime. Apply a template, call StartDataCollection, and the chart fills itself; for a custom feed, set the source to Custom and push your own values with AddDataPoint.

If your live data lives behind a web API, EasyHTTP pairs naturally with this workflow: poll an endpoint, parse the JSON, and feed each result into AddDataPoint as it returns for a remotely driven, smoothly animated real-time line chart.

Animation versus smoothing at a glance

Two independent controls in Fast Chart Widgets. Animation governs motion; smoothing governs how the line is drawn between points.

FAQ