How to Add a Graph or Chart to a UMG Widget in Unreal Engine 5

Why charts are painful in stock UMG

If you have ever tried to figure out how to add a graph chart to UMG in Unreal Engine, you already know stock UMG gives you nothing to start from. There is no chart widget in the palette. The usual answers are all heavy: hand-roll a custom 'UWidget' and override 'NativePaint' with raw Slate draw elements, abuse a 'Canvas Panel' full of 'Image' widgets to fake bars, or render a texture in a separate render target and stretch it over an 'Image'. Each of those means you own the maths for axes, ticks, scaling, hit-testing and animation forever.

The friction is worse than it looks. A line chart that has to autoscale as new points arrive, keep its axis labels legible, animate the latest point and stay readable on a HUD is a real piece of engineering, not an afternoon. Most teams either ship something ugly or give up on in-engine charts entirely and screenshot a spreadsheet.

Fast Chart Widgets removes that whole category of work. It is a runtime data-visualisation plugin for UE5 that adds a single Blueprintable UMG widget, 'UFastChartWidget', which draws eight chart types entirely in Slate with no per-project drawing code. Everything below uses it.

What you get out of the box

The core class is 'UFastChartWidget', a Blueprintable widget that derives from 'UUserWidget' and renders in 'NativePaint' using Slate draw elements, so it needs no image assets to draw a chart. That means it lives in the UMG palette like any other widget and slots straight into your existing canvas.

It supports eight chart types, exposed through the 'EFastChartChartType' enum: Line, Area, Scatter, Bar, Pie, Donut, Polar Area and Radar. So whether you want a frame-time line, a resource bar chart, an economy pie or a stat-comparison radar, it is the same widget configured differently.

There are two ways to drive it, and you can mix them. The template path uses 34 pre-configured chart templates and an editor toolbar button to drop a styled chart in with one click. The code path uses a fluent builder and series API to construct and feed charts from Blueprint or C++. We will walk both.

Dropping a Fast Chart Widget on the canvas

Install the plugin into your project's 'Plugins' folder (or the engine's 'Plugins' folder) and enable it, then restart the editor. Note that Fast Chart Widgets ships for Windows 64-bit and targets Unreal Engine 5.5, 5.6 and 5.7.

1. Open or create a Widget Blueprint (right-click in the Content Browser, choose 'User Interface', then 'Widget Blueprint').

2. In the 'Palette' panel, search for the Fast Chart widget and drag it onto your 'Canvas Panel' just like a 'Button' or 'Image'. It is a normal UMG widget, so it respects anchors, layout and Z-order.

3. Give it a sensible size in the 'Details' panel. A chart wants room to breathe, so a few hundred pixels in each dimension is a reasonable starting point for a HUD overlay.

At this point you have a live chart widget on the canvas. The next decision is how to populate it: from a ready-made template, or by hand from the builder API.

Picking a template from the marketplace toolbar

The fastest route is the editor's template system. The plugin's editor module extends the Widget Blueprint editor toolbar with a 'Chart Template Marketplace' button (the 'Add Chart' button). Clicking it opens a Slate panel listing the 34 templates, organised into six categories: Performance, Gameplay, Multi-Data, Visual Styles, Minimal and Other.

1. With your Widget Blueprint open, click the 'Add Chart' / 'Chart Template Marketplace' button in the toolbar.

2. Browse the categories and pick a template that matches your intent, for example a Performance line chart or a Minimal sparkline. Each template is a pre-styled configuration, so you are choosing a look and a default data behaviour, not just a chart type.

3. Confirm, and a configured 'UFastChartWidget' is inserted into the open Widget Blueprint for you. From there you can resize and reposition it like any widget and tweak its properties in 'Details'.

Templates are shipped as DataAssets, and several of them are wired to auto-collect engine metrics. A template's data source can be FPS, FrameTime, Memory, GameThreadTime, RenderThreadTime, GPUTime, a Custom source you feed yourself, or None for fully manual control. For an auto-collecting template, call 'ApplyTemplate', then 'StartDataCollection' to begin sampling and 'StopDataCollection' to stop. That is the entire setup for a live performance overlay.

Feeding it data from Blueprints or C++

When you want full control over the numbers, use the builder path. On your widget, call 'CreateChartBuilder' to get a 'UFastChartChartBuilder', then choose the chart shape with one of its create methods: 'CreateLineChart', 'CreateAreaChart', 'CreateScatterChart', 'CreateBarChart', 'CreatePieChart', 'CreateDonutChart', 'CreatePolarAreaChart' or 'CreateRadarChart'.

Next, create a series with 'CreateSeries' and push points into it. The series API ('UFastChartChartSeries') gives you 'AddDataPoint' with an X and Y value for plotting one point at a time, 'AddDataPointLabeled' when you want categories rather than numeric X values, and bulk variants 'AddBulkDataPointsXY' and 'AddBulkDataPointsLabeled' for loading an array at once. There is also 'SimulateRandomData' for quickly proving a layout before you have real numbers.

A useful detail when working from Blueprints: the builder and series objects are retained on the widget (in 'ActiveChartBuilders'), so you do not have to promote them to variables to keep them alive past garbage collection. You can build a chart in one event and feed it from another without it disappearing.

For dashboards that show several datasets, the widget manages them directly: 'RegisterDataSet' and 'SetDataSets' to add data, 'SetDataSetVisible' to toggle one on or off, 'GetVisibleDataSetCount' to query state and 'ClearAllDataSets' to reset. That is how you build a multi-series line chart with a legend the player can interact with.

From C++, the template flow is just as direct: load the template DataAsset with 'LoadObject<UFastChartTemplate>', call 'ApplyTemplate', call 'StartDataCollection' if it is an auto-metric source, and 'AddToViewport' to show it.

A common pattern is charting data you have pulled from a backend. If your numbers come from a web API, EasyHTTP can fetch the JSON from Blueprints with an 'Async Quick GET' node, you parse it into a struct, and then pump the values into a series with 'AddBulkDataPointsXY'. The two plugins compose cleanly because the chart never cares where the numbers originate.

Styling basics

Once data is flowing, the appearance is where Fast Chart Widgets earns its keep. Styling is deep but property-driven, so most of it is exposed in 'Details' or via setters rather than buried in code. Per-axis settings cover titles, colours, outlines and shadows, and you can stack multiple grid layers behind the plot. Axis ticks and labels are customisable, including a unit prefix or suffix so a value can read as a percentage, currency or 'ms' without you formatting strings yourself.

The legend can be placed in any of eight positions, and a theme carries a series palette plus chart frame styling so a whole chart stays visually consistent. Series themselves can be restyled at runtime with 'UpdateSeriesStyle', and individual series can be shown or hidden with 'SetSeriesVisible'. Series markers support None, Circle, Square, Triangle and Diamond shapes, and lines can be Solid, Dashed or Dotted.

Range behaviour is worth setting deliberately, especially for live data. Each axis can fit to its data automatically or use a manual minimum and maximum: 'SetFitToDataY' and 'SetFitToDataX' for auto, 'SetManualYRange' and 'SetManualXRange' to pin it. To stop a live chart from snapping and zooming violently as values change, set a 'MinAutoRangeSpan' floor so the auto-range never collapses below a sensible window.

Finally, animation makes a live chart feel alive without extra work. You get point animation and axis-range animation, series smoothing modes (None, Optimized or Full) and animation smoothing options that range from disabled, to animating just the latest point, to blending the entire curve. For a performance overlay, animating the latest point keeps the line moving smoothly as new frame samples arrive.

From here, the productive next step is to open a Widget Blueprint, click the 'Add Chart' button, drop a Performance template on your HUD and call 'StartDataCollection'. You will have a live, styled chart on screen in under a minute, then swap in your own data with the builder API when you are ready.

The two ways to drive a Fast Chart Widget

Both paths target the same UFastChartWidget; you can start with a template and refine with the builder API.

FAQ