Skip to main content
All standard Cube chart types are built on Vega-Lite v5. The visual builder covers the most common patterns, but for anything beyond that — multiple layers with transforms, complex dual-axis rules, custom aggregations, or annotations — you can edit the raw spec directly. For fully freeform layouts using HTML and CSS, see HTML charts.

​
When the spec editor appears

The chart panel automatically falls back to the spec editor when the current Vega-Lite spec has features the visual builder cannot represent:
  • Top-level transform clauses
  • More than two non-text layers
  • Certain dual-axis + rule mark combinations
In these cases, the visual builder is replaced by a code editor showing the full Vega-Lite JSON.

​
Opening the spec editor manually

Click the Edit spec button in the chart panel (visible on Vega-based charts) to open the spec editor. This lets you inspect and modify the generated spec even when the visual builder is active. Changes take effect immediately in the preview.

​
Spec structure

Cube generates standard Vega-Lite v5 specs. The key fields: 
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "mark": { "type": "bar" },
  "encoding": {
    "x": { "field": "order_items.status", "type": "nominal" },
    "y": { "field": "order_items.count", "type": "quantitative" },
    "color": { "field": "order_items.status", "type": "nominal" }
  }
}
Any valid Vega-Lite v5 spec is supported. Refer to the Vega-Lite documentation for the full spec reference.

​
AI-generated specs

The AI agent can generate a full Vega-Lite spec from a natural language description. After running a query, prompt the agent — for example: “Show this as a heatmap of order count by status and month” — and the agent will write the complete spec. AI-generated specs produce valid Vega-Lite v5 JSON and can be further refined in the spec editor.