Lab 22 · The chart engine · rebuilt on Untitled UI

The chart engine.

Charts were parked in Lab 11 with the form work done: sixteen measures matched to forms, six popular charts rejected with reasons, the palette validated. What stayed open was the engine and the ambition. The brief now has three tiers: the easy data (bars and lines), the shaped data (the RSS radar), and the instruments (a heat map of where sales come from, the globe, and more like it). Four candidates were benched: your three, ApexCharts, AG Charts and MUI X Charts, and one challenger this lab proposes. Performance and security were scored as hard criteria, from verified sources, not marketing pages.

The recommendation: Apache ECharts, one engine for all three tiers. It is the only candidate that covers the whole brief in its free, governed core, and the only one whose accessibility layer natively draws the system's own hatched fills.

Seeing beats reading: the live annex renders every tier in the browser with the engine itself, on the system's theme: the hatched open month, the RSS radar against the average, the destination heat map on our own topology, the money flow with its shares, and the service tickets month.

The screens, rebuilt

Drawn fresh from the Untitled kit and the system’s ruled tokens, not restyled from the originals.

The chart language · one hue, honest fills
Apr
May
Jun
Jul
Aug

A finished month is solid; the running month is hatched, the fill rule’s chart job. Animation off on every series.

The sequential ramp, and why dark cannot be a flip
Light · more is darker
Dark · the ramp reverses: more is lighter

The reasoning, kept

01 / the brief

Three tiers, one engine wanted.

02 / the bench

Four engines against eight hard criteria.

03 / the pick

Apache ECharts, and why it is not close.

04 / security

The engine is safe the way it is used. So the use is law.

05 / performance

Budgets, not hopes.

06 / the instruments

The heat map, the money flow, and the radar, under the laws.

One engineering check before the globe

The GL extension (BSD licensed, last published this year) is verified compatible with ECharts 5.x; its compatibility with 6.0 must be proven in a spike before the 3D globe ships. The heat map does not wait for it: the 2D geo series is core. If the spike fails, the globe waits on GL, not the platform on the globe.

The share rule · ruled 20 Aug

Wherever a revenue renders on a chart, its percentage of the total renders beside it: on the node, in the tooltip, in the ranked list. A figure without its share answers "how much" and dodges "how much of what". Counts are exempt; the rule is for money.

What this lab asked

  1. The engine: approved. Apache ECharts for all three tiers, superseding the Lab 11 Recharts adoption. The form mappings, palette and tokens carry over unchanged.
  2. The instrument plan: approved. Origin map first on core geo, the 3D globe behind the GL compatibility spike, money flow sankey next, RSS radar under the signature rules.
  3. Refined on team review, same day: the geographic instrument is a heat map (shade and mark scale with revenue), the RSS radar carries the all-customers average as its baseline, the share rule applies wherever revenue charts, and a service tickets status example joined the live annex.
  4. The globe's home, refined in the ruling: the globe is an instrument with different uses depending on where it lives. For this use, sales origins and destinations, both the origin map and the proven globe live in Sales Analytics. The Board-opener idea was not adopted; future uses of the globe name their own homes when they arrive.
The original document, in its own chrome and drawings, is kept unedited: open the original.
Tripbooks Design SystemBuilt on Untitled UI · Inter for language, IBM Plex Mono for every figureLight and dark from the same tokens