fix(charts): add all required FlowFuse ui-chart properties + document in rule set

Charts rendered blank because the helper was missing 15+ required
FlowFuse properties. The critical three:
  - interpolation: "linear" (no line drawn without it)
  - yAxisProperty: "payload" + yAxisPropertyType: "msg" (chart didn't
    know which msg field to plot)
  - xAxisPropertyType: "timestamp" (chart didn't know the x source)

Also: width/height must be numbers not strings, colors/textColor/
gridColor arrays must be present, and stackSeries/bins/xAxisFormat/
xAxisFormatType all need explicit values.

Fixed the ui_chart helper to include every property from the working
rotatingMachine/examples/03-Dashboard.json charts. Added the full
required-property template + gotcha list to the flow-layout rule set
(Section 4) so this class of bug is caught by reference on the next
chart build.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude/rules/node-red-flow-layout.md

@@ -99,6 +99,51 @@ ui-chart with `category: "topic"` + `categoryType: "msg"` plots one series per u
 - One chart per **metric type** (one chart for flow, one for power).
 - Each chart receives msgs whose `topic` is the **series label** (e.g. `Pump A`, `Pump B`, `Pump C`).
 
+### Required chart properties (FlowFuse ui-chart renders blank without ALL of these)
+
+Derived from working charts in rotatingMachine/examples/03-Dashboard. Every property listed below is mandatory — omit any one and the chart renders blank with no error message.
+
+```json
+{
+  "type": "ui-chart",
+  "chartType": "line",
+  "interpolation": "linear",
+  "category": "topic",
+  "categoryType": "msg",
+  "xAxisType": "time",
+  "xAxisProperty": "",
+  "xAxisPropertyType": "timestamp",
+  "xAxisFormat": "",
+  "xAxisFormatType": "auto",
+  "yAxisProperty": "payload",
+  "yAxisPropertyType": "msg",
+  "action": "append",
+  "stackSeries": false,
+  "pointShape": "circle",
+  "pointRadius": 4,
+  "showLegend": true,
+  "bins": 10,
+  "width": 12,
+  "height": 6,
+  "removeOlder": "15",
+  "removeOlderUnit": "60",
+  "removeOlderPoints": "",
+  "colors": ["#0095FF","#FF0000","#FF7F0E","#2CA02C","#A347E1","#D62728","#FF9896","#9467BD","#C5B0D5"],
+  "textColor": ["#666666"],
+  "textColorDefault": true,
+  "gridColor": ["#e5e5e5"],
+  "gridColorDefault": true
+}
+```
+
+**Key gotchas:**
+- `interpolation` MUST be set (`"linear"`, `"step"`, `"bezier"`, `"cubic"`, `"cubic-mono"`). Without it: no line drawn.
+- `yAxisProperty: "payload"` + `yAxisPropertyType: "msg"` tells the chart WHERE in the msg to find the y-value. Without these: chart has no data to plot.
+- `xAxisPropertyType: "timestamp"` tells the chart to use `msg.timestamp` (or auto-generated) for the x-axis.
+- `width` and `height` are **numbers, not strings**. `width: 12` (correct) vs `width: "12"` (may break).
+- `removeOlderPoints: ""` (empty string) → retention is controlled by removeOlder + removeOlderUnit only. Set to a number string to additionally cap points per series.
+- `colors` array defines the palette for auto-assigned series colours. Provide at least 3.
+
 ### The trend-split function pattern
 
 A common bug: feeding both flow and power msgs to a single function output that wires to both charts. Both charts then plot all metrics, garbling the legend.