tutorial · 2026-05-08
Plotting Multiple Data Series on One Chart in UE5
How to register, toggle, place and theme several lines on a single UMG chart widget without writing any drawing code.
The problem: one chart, several lines
Single-series charts are easy. The moment you need unreal engine multiple lines on one graph widget — current health alongside maximum health, this run's lap times against your personal best, CPU frame time layered over GPU time — the comfortable single-array approach falls apart. You suddenly need each line to own its own data, its own colour, its own visibility toggle, and you need a legend that explains which line is which.
Fast Chart Widgets handles exactly this case. It is a runtime data-visualisation plugin for UE5 that adds a Blueprintable UMG widget, UFastChartWidget, which draws eight chart types entirely in Slate with no per-project drawing code. Rendering happens in the widget's NativePaint via Slate draw elements, so a multi-series line chart is just data and styling — you never touch a canvas, a render target, or a material.
This tutorial walks through the multi-dataset workflow: registering several datasets on one widget, toggling individual series on and off at runtime, choosing where the legend sits, and theming each line through a series palette. Everything below maps to real API on the shipped product.
Registering multiple datasets
The widget exposes a small, purpose-built API for managing more than one series at once. The four functions you will reach for most are 'Register Data Set', 'Set Data Sets', 'Set Data Set Visible' and 'Clear All Data Sets', plus 'Get Visible Data Set Count' to read back how many lines are currently shown. Each registered dataset is an independent series the widget draws on the same axes.
1. Add a UFastChartWidget to your UMG canvas in the Widget Blueprint, the same way you would add any widget, and give it a sensible name so you can reference it from the Event Graph.
2. In the Event Graph, build each line's data. The cleanest route is the builder and series API: call 'Create Chart Builder' on the widget, then 'Create Line Chart', then 'Create Series' for the first line, and push points with 'Add Data Point' taking an X and a Y value (or 'Add Bulk Data Points XY' if you already have arrays). Repeat 'Create Series' for the second line, the third, and so on — each series is one line on the chart.
3. If you are driving the widget from pre-built dataset objects instead, call 'Register Data Set' once per series to add them incrementally, or 'Set Data Sets' to hand the widget the whole collection in a single call and replace whatever was there before.
4. When you need to rebuild from scratch — say the player switched to a different stat screen — call 'Clear All Data Sets' first, then register the new ones. Because the builder and series objects are retained on the widget in its ActiveChartBuilders list, you do not need to promote them to variables to keep them alive past garbage collection; the widget holds the reference for you.
From C++ the same surface is available: add the FastChartWidgets module to your dependencies, create the widget, and call the equivalent functions. The retained-builder behaviour means your charts survive a GC pass without extra bookkeeping on your side.
Toggling series visibility at runtime
Once several lines share a chart, you almost always want the player — or your debug overlay — to be able to hide some of them. A frame-time graph that shows game-thread, render-thread and GPU time at once is dense; letting the user isolate one line makes it readable. There are two layers of control for this.
At the widget level, call 'Set Data Set Visible' with the dataset's index and a boolean. This shows or hides an entire registered series without destroying its data, so toggling it back on is instant and the line picks up exactly where it left off. Pair this with 'Get Visible Data Set Count' to drive UI state — for example, to stop the user hiding the last remaining line, or to update a 'showing 2 of 3' label.
At the series level, the series API exposes 'Set Series Visible' on the UFastChartChartSeries object itself, which is handy when you are holding a reference to a specific series rather than addressing it by dataset index. Either approach leaves the underlying points untouched.
A practical pattern: bind each legend entry or a row of checkboxes to one series. On check-changed, call 'Set Data Set Visible' for that index, then read 'Get Visible Data Set Count' to refresh any summary text. Because visibility is a pure toggle and not a rebuild, this stays cheap even on a chart updating every frame.
Legend placement options
With multiple lines on screen the legend stops being optional — it is the only thing telling the player that the gold line is health and the blue line is shield. Fast Chart Widgets gives the legend eight placement positions through the EFastChartLegendPlacement enum, covering the inside corners of the plot area and the outside edges of the widget.
Inside-corner placements tuck the legend over the chart itself, which keeps the widget compact — good for a HUD overlay where space is tight and the corners of the plot are usually empty. Outside-edge placements push the legend beyond the plot area so it never overlaps the data, which reads more cleanly on a full-screen stats or progression screen where you have room to spare.
Set the placement in the widget's appearance properties (or via the legend section of a template you have applied). Choose the corner or edge that sits in the dead space of your particular dataset: if your lines trend upward and crowd the top-right, drop the legend bottom-left, and vice versa. The comparison table below lays out how to think about the two families of placement.
Series palette and theming
Default colours rarely survive contact with your game's UI. Theming in Fast Chart Widgets runs through FFastChartTheme, which carries a SeriesPalette array — an ordered list of colours the chart assigns to your series in registration order. The first dataset takes the first palette entry, the second takes the second, and so on, so palette order is series order.
To brand your chart, populate the SeriesPalette with your UI's accent colours in the sequence you want them applied, then assign the theme to the widget. If you add or reorder datasets later, remember that the colour mapping follows the registration index — register your most important line first if you want it to take the strongest colour in the palette.
Beyond colour, each series can be styled further through 'Update Series Style', and the plugin offers per-series marker shapes (None, Circle, Square, Triangle, Diamond) and line patterns (Solid, Dashed, Dotted). On a busy multi-line chart these are not cosmetic luxuries — a dashed line plus a square marker lets a colour-blind player tell two overlapping series apart when colour alone would not. Reach for distinct markers and patterns whenever two lines spend a lot of time close together.
If hand-configuring all of this from scratch sounds tedious, it is — which is why the plugin ships 34 pre-configured templates across six marketplace categories. The Multi-Data category specifically includes Dual, Triple and Dashboard combinations built for exactly this multi-series case. Open a Widget Blueprint, click the 'Chart Template Marketplace' button the editor module adds to the toolbar, pick a Multi-Data template, and you get a pre-styled multi-line chart dropped onto your canvas to adjust rather than build from zero.
Keeping multi-series charts readable
Two more controls matter once you have several lines sharing axes. The first is range. With multiple series the auto-fit can swing wildly as one line spikes, so the widget lets you pin a manual range with 'Set Manual Y Range' (and the X equivalent), or stay on auto with 'Set Fit To Data Y'. A MinAutoRangeSpan floor stops the auto-range from zooming in so far that small fluctuations look like an earthquake — useful when one of your series is nearly flat.
The second is animation. The plugin offers point animation, axis-range animation and series smoothing (None, Optimized, Full), plus animation-smoothing modes for whether you animate only the latest point or blend the entire curve. For a live multi-series overlay updating every frame, animating only the latest point keeps motion calm; for a stats screen that loads once, blending the entire curve gives a polished reveal.
Note on engine support and platform: treat Fast Chart Widgets as targeting Unreal Engine 5.5, 5.6 and 5.7, and as Windows (Win64) only. The chart rendering needs no image assets of its own. If your multi-series data is coming from a web API — leaderboards, live economy figures, a remote simulation feed — EasyHTTP is the natural companion for fetching the JSON before you push it into the series.
Multi-series API at a glance
| Function | What it does | When to use it |
|---|---|---|
| Register Data Set | Adds one series to the widget | Building up lines incrementally |
| Set Data Sets | Replaces all series in one call | Loading a complete dataset at once |
| Set Data Set Visible | Shows or hides a series by index, keeping its data | Runtime toggles and legend interaction |
| Clear All Data Sets | Removes every registered series | Rebuilding the chart from scratch |
| Get Visible Data Set Count | Returns how many lines are currently shown | Driving 'showing N of M' UI and guards |
The widget functions you use to manage more than one line on a single chart.
Legend placement: inside corners vs outside edges
| Family | Where it sits | Best for |
|---|---|---|
| Inside corners | Over the plot area, in a corner | Compact HUD overlays where space is tight |
| Outside edges | Beyond the plot area, never overlapping data | Full-screen stats and progression screens |
EFastChartLegendPlacement offers eight positions split across two families.
FAQ
How do I get unreal engine multiple lines on one graph widget?
Add a UFastChartWidget, then either create one series per line through the builder API (Create Chart Builder, Create Line Chart, Create Series, Add Data Point) or register several datasets with Register Data Set / Set Data Sets. Each dataset or series is one line drawn on the same axes.
Can I hide one line without deleting its data?
Yes. Call Set Data Set Visible with the dataset index and a boolean to hide or show an entire series, or Set Series Visible on the series object. The underlying points are untouched, so toggling it back on is instant. Use Get Visible Data Set Count to track how many lines are showing.
How does the chart decide what colour each line is?
Colours come from the SeriesPalette array on FFastChartTheme, assigned in registration order. The first dataset takes the first palette entry, the second takes the second, and so on. Register your most important line first if you want it to take the strongest colour.
Where can I put the legend?
The EFastChartLegendPlacement enum offers eight positions: the inside corners of the plot area and the outside edges of the widget. Inside corners keep the widget compact for HUDs; outside edges avoid overlapping the data on larger stats screens.
Is there a faster way than building a multi-line chart by hand?
Yes. The plugin ships 34 templates across six categories, and the Multi-Data category includes Dual, Triple and Dashboard combinations. Click the Chart Template Marketplace button in the Widget Blueprint toolbar, pick a Multi-Data template, and a pre-styled multi-line chart is dropped onto your canvas to adjust.
Fast Chart Widgets
Line, bar and pie widgets that bind straight to your data — no custom drawing code. Build dashboards, stats screens and debug overlays in minutes.