Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.
Quick Start: Structure data as array of objects → Choose mark type (bar/line/point/area/arc/rect) → Map encodings (x, y, color, size) to fields → Set data types (quantitative/nominal/ordinal/temporal) → Wrap in ```vega-lite or ```vega fence. Always include $schema, use valid JSON with double quotes, field names are case-sensitive. Use Vega-Lite for 90% of charts; Vega only for radar, word cloud, force-directed.
"$schema": "https://vega.github.io/schema/vega-lite/v5.json"
❌ {field: "x",} → Trailing comma, unquoted key
✅ {"field": "x"} → Proper JSON
❌ "field": "Category" when data has "category"
✅ "field": "category" → Case-sensitive match
✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date
| Issue | Solution |
|---|---|
| Chart not rendering | Check JSON validity, verify $schema |
| Data not showing | Field names must match exactly |
| Wrong chart type | Match mark to data structure |
| Colors not visible | Check color scale contrast |
| Dual-axis issues | Add resolve: {scale: {y: "independent"}} |
```vega-lite
{...}
```
Or for full Vega:
```vega
{...}
```
For advanced chart patterns and complex visualizations, refer to references below: