3D bar chart

Who it’s for

Anyone who needs to see several time series, or the same reading across several devices, laid out together instead of stacked as overlapping lines — someone asking “how does this reading compare across all these devices over time, at a glance?” A field of 3D bars gives every device or every key its own row, running alongside time, so a stalled reading or a spike stands out against its neighbors instead of hiding behind them.

What it does

A silo controller reporting energy production and fuel level becomes two rows in depth: energy production runs along the back in blue, fuel level along the front in green, with time moving left to right and each sample’s own bar height. A fuel drop or a production dip against the clock is visible immediately, without reading two separate charts.

• One bar per sample — the grid follows the dashboard time window exactly; nothing is aggregated, averaged or interpolated.
• Up to 20 keys, each its own row, labeled by whichever axis actually tells the rows apart: the key when one entity is charted, the entity when several are.
• Four ways to color the bars — a gradient by value, threshold bands, one color per row from a built-in palette, or the color already set on the data key.
• A legend that matches what’s drawn, above or below the chart — not shown for a value gradient, since its color scale is already on the chart.
• A value axis computed from the data, rounded outward to a whole step, or fixed to your own range.
• A rotatable, zoomable camera, with optional slow auto-rotation.
• No axis carries a title — with several keys sharing one height axis, a title would name one key and misdescribe the rest, so units and decimals come from each key instead, in the tooltip.

How to set up

Data keys

Any numeric timeseries key, up to 20. The widget is not tied to particular key names — each key becomes one row in depth.

Key	Role	Type	Description
any numeric timeseries key	Bar height, one row in depth	Timeseries	Numbers, numeric strings and booleans (false = 0, true = 1) are charted; anything else is skipped. Units and decimals come from the key, falling back to the widget’s own.

The depth axis is labeled with whatever tells the rows apart:

Selection	Row label	Color means
One entity, several keys	the key	one color per key
Several entities, one key	the entity	one color per entity
Several entities, several keys	the entity	one color per key, the same on every entity

How to customize

Time axis

• How the time label reads — Time label format: a fixed pattern from 14:05 to 2026-08-07 14:05:30, or Automatic, which picks a pattern from the window length.
• Its color and font — Time label color, Time label font.

Grid

• What an empty cell does — Cells with no sample: leave it empty, or draw a bar at zero. Either way changes what the computed value axis range covers.
• Row label color and font — Row label color, Row label font.
• Grid line color — Grid line color.

Value axis

• Fix the range yourself instead of letting it compute — Minimum, Maximum (see Time window and value range below for exactly how an empty field is filled in).
• Label color and font — Value label color, Value label font.

Legend

• Turn the legend on or off — Show the legend.
• Where it sits — Position: above or below the chart.
• Its text color and font — Text color, Font.

Bars

• How bars are colored — Bar color: a gradient by value, threshold bands, a built-in palette per row, or the color already set on the data key (see Time window and value range below for the shipped threshold bands).
• The gradient’s colors and scale — Color for the lowest, middle and highest value, and whether the color-scale strip is shown on the chart; used with the gradient mode.
• Bar thickness — Bar thickness, as a percentage of the cell it stands in.
• Print the value on every bar, plus its color and font.
• The color of a hovered bar — left empty by default, which keeps the bar’s own color so its height stays readable.

Tooltip

• Turn the tooltip on or off — on by default.
• What it includes — the row name, the timestamp, the key’s units, each switchable on its own.
• Its text color, background and font.

Camera

• Starting height angle, rotation angle and distance.
• Slow automatic rotation — Rotate the scene automatically, and its speed in degrees per second.

Time window and value range

Every bar is one sample at one timestamp — nothing is interpolated, averaged or carried forward, so a device that stops reporting leaves a gap rather than a flat plateau. The number of bars follows the dashboard time window, so set its grouping interval to the step you want per bar: one hour over a day gives 24 bars per row. Timestamps use the browser’s local timezone.

With a wide window or many rows, the total of timestamps times keys can outrun what a browser can draw. Past 50,000 bars the widget refuses to render and reports how many timestamps and rows it found instead of freezing, so narrow the window or add a grouping interval.

In threshold mode, a bar takes the color of the band its value falls into: From is included, To is not, so neighboring bands meet without overlapping. Leave To empty for a band with no upper limit. The shipped default:

From	To	Color
—	0	Color below every threshold (grey)
0	50	Green
50	80	Amber
80	—	Red

The “Color above every band” setting is only reached when the highest band itself has a real upper limit, leaving a gap above it for that color to fill; with the shipped default, the top band is left open, so nothing ever needs it.

For the value axis:

Minimum	Maximum	Resulting axis
empty	empty	From the smaller of the data minimum and 0, up to the data maximum, both rounded outward to a whole step
set	empty	Your minimum, computed maximum
empty	set	Computed minimum, your maximum
set	set	Exactly as configured

Tips

• The chart needs ECharts 5.x and the ECharts GL 2.x extension, in that order — ECharts GL attaches to the global echarts, so it must load second, and it isn’t compatible with ECharts 6.x. Both are already declared as widget resources and load automatically; if an instance doesn’t expose them, or the browser has no WebGL, the chart explains that instead of showing an empty box.
• All rows share one value axis, unscaled. Keys whose magnitudes are orders of size apart — say, a percentage next to a six-figure energy total — are better split across two widgets than crammed onto one, where the small one would flatten to nothing.
• The lowest tick on the value axis is left blank on purpose: it sits on the corner where the floor meets both other axes, and a number there reads as if it’s floating in mid-air rather than marking the scale.