How to Create a Chart from Blueprint Code and Data in Unreal Engine

The problem: data you have, a chart you don't

You already have the numbers. Score over time, resource counts, frame timings, the result of a REST call you parsed into an array. What you do not have is a clean way to put them on screen. The usual path in Unreal Engine is to hand-draw onto a UMG canvas, fight with line thickness and axis scaling, and end up maintaining bespoke drawing code in every project. That is the exact friction this guide removes.

If you have been searching for how to create a chart from Blueprint code and data in Unreal Engine, the answer with Fast Chart Widgets is a fluent builder API. You add one widget, ask it for a chart builder, create a series, and push your data in. There is no per-project drawing code: the widget renders all of its chart types in Slate during paint, so you stay in Blueprint and let the plugin handle the geometry.

This tutorial covers the code path specifically: creating a builder from the widget, making series, the four ways to feed in data points, the difference between labelled and XY data, and restyling a series at runtime. Everything here is grounded in the actual UFastChartChartBuilder and UFastChartChartSeries API that ships with the plugin.

Step 1: get a builder from the widget with CreateChartBuilder

First, place the chart. Add a UFastChartWidget to your UMG canvas the same way you would add any user widget, and give it a sensible name in the hierarchy so you can reference it from the Event Graph.

1. In your Event Graph, drag off the widget reference and call the 'CreateChartBuilder' node. This returns a UFastChartChartBuilder, which is the fluent object you will use to define what the chart actually shows.

2. Choose the chart type by calling one of the builder's create nodes. The builder exposes 'CreateLineChart', 'CreateAreaChart', 'CreateScatterChart', 'CreateBarChart', 'CreatePieChart', 'CreateDonutChart', 'CreatePolarAreaChart' and 'CreateRadarChart', one per supported chart type.

A detail worth knowing up front: the builders and series you create are retained on the widget in its active builders list. That means you do not have to promote the builder to a Blueprint variable just to keep it alive past garbage collection. The widget owns it. You can still store a reference if it makes your graph tidier, but you will not get a silently dead chart because a local pin went out of scope, which is a common trap with builder-style APIs in Unreal.

Step 2: create a series to hold your data

A chart is a container; a series is the actual line, set of bars, or set of points. Most charts have one series, but multi-series line and bar charts are common for comparisons, so the series is a separate object.

3. From the builder, call 'CreateSeries'. This gives you a UFastChartChartSeries, which is where every data point you add will live and which carries its own style.

If you want a quick, populated chart before you have wired up real data, the series exposes 'SimulateRandomData'. Calling it seeds the series with random points so you can confirm your widget is placed correctly, your axes look right, and your styling reads well on screen before you connect the real source. Treat it as a development aid and remove the call once your real data is flowing.

For multiple datasets, create more than one series, or use the widget's dataset management nodes such as 'RegisterDataSet', 'SetDataSets', 'SetDataSetVisible' and 'ClearAllDataSets' when you want to toggle whole datasets on and off, for example showing or hiding a comparison line behind a legend click.

Step 3: add data points, one at a time or in bulk

With a series in hand, you feed it values. Fast Chart Widgets gives you four data-entry nodes, split along two axes: single point versus bulk, and XY versus labelled. Pick based on how your data arrives.

For a single XY point, call 'AddDataPoint' with an X and a Y float. This is the right node inside a loop or on a recurring event, for example appending the latest value once per second to a live line chart. Each call extends the series by one point.

When you already hold a whole array, do not loop one point at a time. Call 'AddBulkDataPointsXY' to push an entire set of XY values in a single node. This is the natural fit after parsing a response body or loading a saved run: you build your arrays, then hand them over once.

Adding points incrementally pairs well with the widget's range control. By default a series fits to its data, but if you are streaming values you can pin the view with 'SetManualYRange' and 'SetManualXRange', or call 'SetFitToDataY' and 'SetFitToDataX' to let it auto-scale. A minimum auto-range span stops the chart from violently zooming when every value is nearly identical, so a near-flat live line stays readable instead of snapping to a hairline.

Labelled versus XY data: choosing the right shape

The second axis of choice is whether your X value is a number or a name. This is the difference between a continuous chart and a categorical one, and the plugin gives you a matched pair of nodes for each.

Use XY data, via 'AddDataPoint' and 'AddBulkDataPointsXY', when X is genuinely numeric: time in seconds, distance, wave number, frame index. These suit line, area and scatter charts where both axes are measured quantities and the spacing between points carries meaning.

Use labelled data, via 'AddDataPointLabeled' and 'AddBulkDataPointsLabeled', when X is a category rather than a number: weapon names, resource types, level names, survey attributes. These are the natural fit for bar, pie and donut charts, where each value belongs to a named slice or column rather than sitting at a numeric coordinate. The label travels with the value, so your axis ticks and legend read in plain language instead of raw indices.

The rule of thumb: if it makes sense to draw a continuous line between two points, use XY; if the points are distinct named things, use labelled. Matching the data shape to the node keeps your axis labels honest and saves you reformatting later.

Step 4: update series style at runtime

Once data is on screen you will want it to look deliberate, and you will sometimes want the look to change while the game runs, for example turning a line red when a value crosses a threshold. That is what 'UpdateSeriesStyle' is for.

4. Call 'UpdateSeriesStyle' on the series and pass an FFastChartSeriesStyleOptions struct. This struct controls the series colour, line thickness, marker shape, line pattern and smoothing in one place, so a single node restyles the whole series.

The marker shape options are None, Circle, Square, Triangle and Diamond, letting you distinguish overlapping series at a glance. Line patterns are Solid, Dashed and Dotted, which is the cleanest way to separate a forecast or target line from a measured one without relying on colour alone. Smoothing softens jagged data into a curve when that better suits the story your chart tells.

Because 'UpdateSeriesStyle' is just another node, you can call it from any event. Drive colour from a Boolean, swap markers when a mode changes, or set everything once on Begin Play for a fixed look. You can also hide a series entirely with 'SetSeriesVisible' rather than rebuilding the chart, which is the lightweight way to power a toggle.

5. Run the game. With the widget added to the viewport, your builder created, a series populated, and a style applied, the chart draws itself in Slate each frame with no further drawing code on your side.

Where the code path fits alongside templates

Fast Chart Widgets has a second workflow worth knowing about so you choose the right one. Alongside the builder API, it ships an editor Chart Template Marketplace button in the Widget Blueprint toolbar, backed by a library of pre-configured chart templates across categories such as Performance, Gameplay, Multi-Data, Visual Styles and Minimal. Clicking a template drops a fully styled chart onto your canvas with one click.

Reach for templates when you want a polished result fast and your data is one of the common shapes, or when a template's data source can auto-collect engine metrics such as FPS, frame time, memory, game thread time, render thread time and GPU time for a debug overlay. Reach for the builder API, the subject of this tutorial, when the data is yours and arbitrary, when you are generating series dynamically, or when you need to restyle and toggle series in response to gameplay. The two are not exclusive: you can start from a template for the look and still drive its data from code.

The plugin runs on Unreal Engine 5.5, 5.6 and 5.7, and is a Windows 64-bit plugin. Charts render in Slate during paint, so no image assets are required to draw them.

A common pattern: chart a value you fetched from the web

A frequent real use is plotting data that did not originate in the game at all. Pair Fast Chart Widgets with a Blueprint HTTP plugin such as EasyHTTP: call an endpoint with an Async Quick GET node, parse the JSON response into arrays in Blueprint, then hand those arrays straight to 'AddBulkDataPointsXY' or 'AddBulkDataPointsLabeled' on your series. You go from a REST call to a styled chart without leaving the Event Graph.

The same bulk-add approach works for any data you can get into an array, whether that is a save file, a simulation tick history, or an in-editor dataset. The builder and series API does not care where the numbers came from; it only cares about their shape, which is why getting the XY-versus-labelled choice right up front pays off.

From here, the next step is to wire one real source into a single series, confirm it with 'SimulateRandomData' first if you want a sanity check, then layer styling and range control until the chart reads exactly the way you want. Once one series works, adding more is the same pattern repeated.

Choosing a data-entry node

Pick by how your data arrives (single vs array) and what your X axis represents (numeric vs category).

FAQ