Kantan Charts

This UE4 plugin provides some basic chart widgets for use with UE4, either through the UMG designer in the editor, or directly in Slate/C++. The charts are intended primarily as development/debugging aids for visualizing game state, however they have also been tested in packaged builds so could be used in games or other end-user software if desired.

Setup

No special setup is required, just install the plugin to the engine, or if you prefer, manually to a project by copying the plugin directory into YourProject/Plugins.

For UMG, the chart widgets will automatically be available in the widget designer palette, under the category Kantan Charts.

To use the Slate widgets in C++, add a dependency on the KantanChartsSlate module, and include the desired headers from the /Charts directory.

Usage

The example project shows various ways of using the chart widgets, and contains extensive comments. The ChartWidgets folder shows examples of how to setup charts within the UMG designer. The Blueprints folder, in particular the Character and Controller blueprints, contain the bulk of the logic for manipulating the chart data and visuals at runtime.

All chart functions are tagged with ‘Kantan Charts’, so typing this in a context menu will show you all available functions related to the given chart type.

The following is a brief overview of the plugin.

Chart types

Bar chart - displays a single category/value data series.

Cartesian chart - plots one or more series of x/y data points, as points, lines, or both.

Time series plot - an extension of the Cartesian chart specifically for plotting time-varying data.

Basic use

Create a new UMG widget, and add one or more widgets to it from the Kantan Charts palette category.

Configure the chart properties as required. Most properties are self explanatory, but they all have tooltips too. Properties include things such as axis setup, chart update frequency and visual style adjustments.

Finally, you’ll need to add data series to your chart at runtime. With the standard charts, this is very straightforward. For a bar chart, call the function AddCategory. Store the resulting ID, and use it to subsequently update the value for the category as required, through a call to UpdateCategoryValue. For a Cartesian chart, use AddSeries, and then AddDatapoint.

Series Identifiers

All charts provide two options when adding series. Generally, you’ll want to allow the system to generate a series ID for you, which you store and use to identify the series from that point on. However, there are also versions allowing you to specify the series ID yourself (in the form of a textual Name) when creating the series. This can be more convenient when you want to quickly set up a chart that will not need to be accessed in many places.

Chart Legend

There is also a simple ChartLegend widget which can be used to display a key of the series currently displayed on a Cartesian chart. To use this, add the widget separately in the UMG designer and place it however you like. It must be linked to a chart by a runtime call to SetChart. Generally, this will be done in the Construct event of your UMG widget.

Datasources

There is also an advanced version of each chart type. The only difference is that these versions do not store their data internally, but instead must be provided with a datasource, from which they will retrieve the data as needed. This allows the data to be decoupled from the chart, which is necessary if you want to display multiple views of the same data across multiple charts. It also allows for better organisation and less dependencies between blueprints.

To use one of these charts, you have two options. Either create a KantanSimpleCategoryDatasource/KantanSimpleCartesianDatasource object, which you populate with the data, or alternatively implement the datasource interface (KantanCategoryDatasourceInterface/KantanCartesianDatasourceInterface) on one of your own classes/blueprints. Either way, you then need to call the SetDatasource function on your chart to associate the datasource. Note that with the advanced versions, you will also need to manually enable and configure individual series by calling EnableSeries/ConfigureSeries on the chart.

Chart Styles

Since the charts were designed for development use, styling is not a major feature. However, along with the simple style adjustments such as fonts, margins, opacity and such, it is also possible to change the data series styles to some degree. In the advanced properties section of Category Styles/Series Styles, you can select a style set. This defines colors and data point images. The plugin comes with defaults which can be seen by enabling Show Plugin Content in the content browser. You can create your own via the Miscellaneous category in the content browser asset creation menu.

Series are assigned styles automatically as they’re added to charts. If you need to associate a specific color/point style with a particular data series, you can do so via the AddCategoryStyleOverride/AddSeriesStyleOverride functions.