3D bar chart

3D bar chart

Draws numeric time series as a field of 3D bars: time across the width, one row per data key in depth, the value as bar height. One bar per point the time window returns — the widget adds no aggregation of its own.

Features

• One bar per data point, so the grid follows the dashboard time window
• Bar colors by gradient, threshold bands, per-row palette, or the color set on the data key
• Legend showing the colors actually drawn, above or below the chart
• Value axis computed from the data and rounded to a whole step, or fixed to your own range
• Tooltip with the row name, the timestamp and the value in that key’s units
• Separate color and font for every label, the legend and the tooltip
• Rotatable and zoomable camera, with optional slow auto-rotation

Data keys

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

• any numeric timeseries key (timeseries) — the value becomes the bar height. Numbers, numeric strings and booleans (false = 0, true = 1) are charted; anything else is skipped
• units and decimals — taken from each key, falling back to the widget’s own units and decimals

The depth axis is labelled 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

Example — a silo controller on the preview image:

Key	Type	Units	Row
energyProduction	timeseries	kW	back, blue
fuelLevel	timeseries	%	front, green

Configuration

• Time axis — the label format, from 14:05 to 2026-08-07 14:05:30, or automatic from the window length
• Grid — whether a cell with no sample stays empty or is drawn as a bar at zero, plus the row label and grid line colors
• Value axis — minimum and maximum; leave either empty and it is computed from the data and rounded outwards to a whole step
• Legend — on or off, above or below the chart
• Bars — the color mode, bar thickness as a percentage of its cell, the value printed on each bar, and the color of a hovered bar
• Tooltip — on or off, and whether it carries the row name, the timestamp and the units
• Camera — the starting height angle, rotation angle and distance, and optional auto-rotation

Title, background and padding come from the widget’s own Appearance settings. No axis carries a title: with several keys sharing one height axis, a title on it would name one key and misdescribe the rest.

Threshold ranges

In threshold mode a bar takes the color of the band its value falls into. from is included, to is not, so neighbouring bands meet without overlapping; leave to empty for a band with no upper limit. The shipped default:

Range	Level	Color
below 0	Outside	Grey
0 – 50	Normal	Green
50 – 80	Elevated	Amber
80 and above	High	Red

The color for values above every band applies only when the highest band has an upper limit. A band whose to is at or below its from is ignored.

Value axis ranges

Minimum	Maximum	Resulting axis
empty	empty	From the smaller of the data minimum and 0 up to the data maximum, both rounded to a whole step — data from −14 to 22 gives −20 to 30
set	empty	Your minimum, computed maximum
empty	set	Computed minimum, your maximum
set	set	Exactly as configured

All keys share this one axis, unscaled: keys whose magnitudes are orders apart are better on two widgets than on one.

Time window

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 time window, so set its grouping interval to the step you want per bar: one hour over a day gives 24 bars. Timestamps use the browser’s local timezone.

Requirements

ECharts 5.x and the ECharts GL extension 2.x, in that order — ECharts GL attaches to the global echarts, so it must load second. If the instance does not expose them globally, add them on the widget Resources tab:

• https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js
• https://cdnjs.cloudflare.com/ajax/libs/echarts-gl/2.1.0/echarts-gl.min.js

ECharts GL 2.x is not compatible with ECharts 6.x, so pin the 5.x line. A 3D chart also needs WebGL; if either is missing, the widget says so instead of showing an empty box.