Mixed Charts & Dashboards

Moving from “one chart per component” to real dashboards: multiple series in one chart, explicit per-series configuration, and coordinating components through shared Variables.

1 · seriesField auto-pivot

One-liner to turn a single y-field into N series by pivoting on another field.

2 · Explicit series[] array

Each series comes from a different column. You hand-pick colour, label, and border width.

3 · Drill-through coordinated dashboard

Chart click writes a Variable; a downstream table reads it back. This is the generic pattern for linked-view dashboards.

Click a bar → filter the table

The chart's onDrillThrough sets selectedRegion to the clicked bar's source row. The table's rowVisibleExpr reads it back. Click the same bar again (or any bar with empty data) to see the no-selection state.

Order	Region	Product	Status	Revenue
ORD-1000	East	Water Bottle	shipped	$689
ORD-1001	West	T-Shirt	pending	$70
ORD-1002	East	T-Shirt	cancelled	$60
ORD-1003	West	T-Shirt	shipped	$357
ORD-1004	West	Wireless Buds	paid	$4,942
ORD-1005	West	Yoga Mat	paid	$470
ORD-1006	East	Sneakers	shipped	$261
ORD-1007	South	Sneakers	cancelled	$738
ORD-1008	West	Throw Pillow	pending	$888
ORD-1009	North	Smart Watch	paid	$1,392
ORD-1010	East	Jacket	paid	$440
ORD-1011	West	Smart Watch	paid	$5,073
ORD-1012	North	Water Bottle	paid	$492
ORD-1013	South	Jeans	paid	$949
ORD-1014	South	Sneakers	paid	$413
ORD-1015	East	Jeans	refunded	$540
ORD-1016	West	T-Shirt	cancelled	$584
ORD-1017	West	Desk Lamp	paid	$812
ORD-1018	East	Water Bottle	shipped	$588
ORD-1019	South	Wireless Buds	paid	$5,895
ORD-1020	East	T-Shirt	paid	$936
ORD-1021	North	Throw Pillow	shipped	$296
ORD-1022	East	Throw Pillow	paid	$779
ORD-1023	East	Yoga Mat	paid	$432
ORD-1024	East	Candle Set	paid	$71
ORD-1025	East	Wireless Buds	paid	$3,080
ORD-1026	South	Running Shoes	shipped	$315
ORD-1027	East	Candle Set	cancelled	$728
ORD-1028	West	Dumbbells	shipped	$689
ORD-1029	South	Jeans	cancelled	$915
ORD-1030	East	Wireless Buds	pending	$3,078
ORD-1031	North	Laptop Pro	cancelled	$3,485
ORD-1032	South	Candle Set	paid	$585
ORD-1033	South	Throw Pillow	paid	$859
ORD-1034	South	USB Hub	cancelled	$3,302
ORD-1035	South	Water Bottle	paid	$477
ORD-1036	West	Smart Watch	paid	$1,350
ORD-1037	East	Water Bottle	paid	$451
ORD-1038	West	Dumbbells	pending	$204
ORD-1039	North	Rug 5x8	pending	$1,180
ORD-1040	East	Jeans	shipped	$1,188
ORD-1041	East	Desk Lamp	cancelled	$697
ORD-1042	South	Jeans	paid	$72
ORD-1043	West	Candle Set	paid	$500
ORD-1044	North	Candle Set	shipped	$779
ORD-1045	East	Candle Set	refunded	$1,180
ORD-1046	North	Yoga Mat	refunded	$656
ORD-1047	West	T-Shirt	cancelled	$186
ORD-1048	East	Jacket	paid	$1,134
ORD-1049	South	Water Bottle	shipped	$760
ORD-1050	East	Sneakers	paid	$303
ORD-1051	East	Candle Set	paid	$122
ORD-1052	North	Desk Lamp	cancelled	$228
ORD-1053	East	Water Bottle	pending	$402
ORD-1054	South	Dumbbells	paid	$1,060
ORD-1055	West	Yoga Mat	paid	$526
ORD-1056	West	Yoga Mat	paid	$256
ORD-1057	South	Jeans	shipped	$1,008
ORD-1058	West	Throw Pillow	pending	$341
ORD-1059	South	Smart Watch	paid	$3,780
ORD-1060	South	Jeans	shipped	$122
ORD-1061	West	T-Shirt	pending	$1,292
ORD-1062	West	Laptop Pro	paid	$3,729
ORD-1063	East	Running Shoes	paid	$392
ORD-1064	South	Sneakers	refunded	$852
ORD-1065	East	Yoga Mat	paid	$37
ORD-1066	East	Jacket	shipped	$960
ORD-1067	North	T-Shirt	paid	$684
ORD-1068	North	USB Hub	paid	$2,056
ORD-1069	South	Running Shoes	paid	$714
ORD-1070	West	Rug 5x8	paid	$1,037
ORD-1071	North	Water Bottle	paid	$600
ORD-1072	East	Wireless Buds	refunded	$1,275
ORD-1073	West	Running Shoes	paid	$216
ORD-1074	East	Desk Lamp	pending	$489
ORD-1075	West	Smart Watch	shipped	$2,718
ORD-1076	North	Rug 5x8	cancelled	$688
ORD-1077	South	Running Shoes	refunded	$90
ORD-1078	South	Sneakers	refunded	$1,501
ORD-1079	South	T-Shirt	pending	$336

Notes

seriesField vs series[]. Use seriesField for auto-pivot from long-format data; use series[] when each series is a different column of wide-format data.
Dual y-axes. Per-series yAxisID on Chart.js primitives maps to yAxis / yAxis2 in ChartComponentProps (v1 ships single-axis; use per-series color + scale-tied series for side-by-side scales).
Drill value shape. For charts, the drill-through value is the aggregated group row — a synthetic row whose fields are whatever the chart grouped on.
Keep the subtitle expression-bound. Echoing the active selection as the chart subtitle is the cheapest way to make a dashboard feel responsive.