UI Toolbox logoUI Toolbox

Graph

Graph in UIToolbox draws line, area, bar or scatter charts of its GraphSeries children. Each series is also its legend row.

Video tutorial: Bar chart. All videos: Video tutorials.

<tb:Graph name="usage" chart-type="Line" y-title="Usage %" x-title="Time (s)" y-min="0" y-max="100" style="height: 260px;">
    <tb:GraphSeries label="CPU" max-points="60" />
    <tb:GraphSeries label="Memory" color="#33C4F2" line-width="3" />
</tb:Graph>

<tb:Graph y-title="Usage %" y2-title="Disk MB/s" y2-min="0" animate="true">
    <tb:GraphSeries label="CPU" values="30, 45, 40" />
    <tb:GraphSeries label="Disk" values="120, 80, 200" secondary-axis="true" />
</tb:Graph>

<tb:Graph chart-type="Bar" categories="Q1, Q2, Q3" show-values="true">
    <tb:GraphSeries label="Sales" values="10, 20, 30" />
</tb:Graph>

<tb:Graph chart-type="Bar" stacked="true" categories="Q1, Q2, Q3">
    <tb:GraphSeries label="Shop" values="10, 20, 30" />
    <tb:GraphSeries label="Web" values="5, 15, 25" />
</tb:Graph>

var graph = root.Q<Graph>("usage");
var cpu = graph.GetSeries("CPU");
cpu.AddPoint(time, load);            // drops the oldest point past MaxPoints
graph.DataPointSelected += (series, index) => Debug.Log(series == null ? "none" : $"{series.Label} {series.GetDataPoint(index)}");
graph.SetAxisRange(GraphAxis.X, 0, 120);
graph.AddSeries("Disk").SetData(new float[] { 5, 8, 6 });   // X is the index
Member Description
GraphSeries.Label (label), Color (color), LineWidth (line-width, 2), Hidden (hidden) The name, the color (clear takes the palette color by position), the line width in pixels, and whether the series is drawn.
GraphSeries.Values (values), Data, SetData(xs, ys), SetData(ys), AddPoint(x, y), ClearPoints The data. values, Data and SetData(ys) use the index as X. Data is for a binding: it changes the points only when a value differs.
GraphSeries.MaxPoints (max-points), Points, GetDataPoint, DisplayColor A limit for AddPoint (0 means no limit), the points, one point, and the drawn color.
GraphSeries.SecondaryAxis (secondary-axis) Plots the series on the right Y axis, with its own fitted or fixed range. The left axis then fits only the other series.
GraphSeries.Reveal How far the series has grown in, 0 to 1. Below 1 only during an Animate grow-in.
ChartType (chart-type) Line, Area, Bar or Scatter. Bars of the series sit side by side in each X slot and grow from 0.
Stacked (stacked) Puts the bars of a Bar chart on top of each other. Off by default. See Stacked bars.
XMin, XMax, YMin, YMax (x-min ...), SetAxisRange Fixed axis ends. NaN (the default) fits the data. An auto Y range rounds out to the ticks.
XTitle, YTitle (x-title, y-title), SetAxisTitle, XFormat, YFormat The axis titles and the tick number formats ("0.##").
Y2Min, Y2Max, Y2Title, Y2Format (y2-min ...), GraphAxis.Y2 The right Y axis of the secondary series: fixed ends (NaN fits), the title at the top right, and the number format of its ticks, bar values and tooltips. The right axis line and tick labels show while a secondary series shows.
SecondaryView The range of the secondary series now. A Y zoom or pan moves it by the same share of the range.
Animate (animate) Grows each series up from the baseline when it gets new data (SetData, values), shows again, or the graph is attached. AddPoint does not grow it again. Off by default.
Categories (categories) Comma-separated X tick labels by index, for bar charts.
ShowGrid (show-grid), ShowLegend (show-legend), ShowValues (show-values) The grid lines, the legend, and a value label on each point or bar.
Interactive, ZoomPan (zoom-pan) Hover, selection and legend clicks; the wheel, drag and double-click view changes. On by default.
View, IsZoomed, SetView, ResetView, ViewChanged The shown data range. ResetView goes back to the fitted range.
HoveredPoint, SelectedPoint, SelectPoint, PointAt, ToData The point under the pointer and the selected point, as (series, index); a hit test within HIT_RADIUS (10 px) or inside a bar; and a panel position in data units.
DataPointHovered, DataPointSelected, DataPointAdded The events. The first two send (null, -1) when the point clears.
Graph.NiceStep(range, target) The tick step: 1, 2 or 5 times a power of 10.

Stacked bars

Set Stacked on a Bar chart. At each X, the bar of the first series starts at 0, and the bar of each next series starts where the bar before it ends. Each bar is as wide as the whole group.

Styling

Class Element
tb-graph The graph (column, grows). --tb-graph-grid and --tb-graph-axis set the grid and axis line colors. tb-graph--panning is added during a drag.
tb-graph--secondary Added while a secondary series shows. The chart then has 40 px right padding for the right tick labels.
tb-graph__y-titles The row over the chart with the left and right Y titles.
tb-graph__y-title, tb-graph__y2-title, tb-graph__x-title The axis titles (small muted text). The right Y title sits at the right end of its row.
tb-graph__chart The area around the plot. Its padding makes room for the tick labels.
tb-graph__plot The data area (accent border when the graph has focus). It clips the canvas.
tb-graph__canvas The drawing surface, which fills the plot.
tb-graph__tick-label, --x, --y, --y2 An axis tick label, below the plot, left of it, or right of it.
tb-graph__value-label A value above a point or bar.
tb-graph__legend The wrapping row of legend entries.
tb-graph__series, --hidden A series and its legend entry; a hidden series (dimmed).
tb-graph__series-swatch, -label The color bar and the name of an entry.