Nextreme Charts

Ultimate Charts

A unified charting skill centered on Vega-Lite — the most LLM-friendly, publication-grade declarative chart grammar. For the ~10% of chart types Vega-Lite doesn't handle natively, it falls back to full Vega (same toolchain, same themes). Two alternative engines (QuickChart.io, ECharts) are available for specific use cases.

Engine Selection

⭐ Primary Engine: Vega-Lite (with Vega fallback)

This is the default path. It covers all chart types through a single toolchain.

Chart Type Coverage

Workflow

# 90% of cases — Vega-Lite YAML spec → SVG
node ${CLAUDE_SKILL_DIR}/scripts/render.mjs \
  --spec chart.yaml \
  --output chart.svg \
  --theme mckinsey

# 10% exotic cases — full Vega JSON spec → SVG
node ${CLAUDE_SKILL_DIR}/scripts/render.mjs \
  --vega \
  --spec candlestick.json \
  --output chart.svg \
  --theme ft

Available Themes (Vega-Lite & Vega)

Style Presets

--variant light    # Light background (default)
--variant dark     # Dark background
--size desktop     # 728x420px (default)
--size mobile      # 600x400px
--width 1200       # Custom width override
--height 600       # Custom height override

Alternative Engines

QuickChart.io (Zero-dependency PNG)

For when the user just wants a quick chart image without installing anything.

# 1. Write payload to file (NEVER shell-interpolate data)
cat > payload.json << 'EOF'
{
  "version": "4",
  "backgroundColor": "white",
  "width": 600,
  "height": 400,
  "chart": { "type": "bar", "data": { ... } }
}
EOF

# 2. POST with curl
curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d @payload.json \
  --output chart.png

See references/quickchart.md for theme tokens and all chart configs.

Apache ECharts (Interactive HTML)

For BI dashboards, financial charts, and multi-panel interactivity.

See references/echarts.md for 11 templates and project setup.

Decision Flow

User asks for chart
  ├─ Is this for a paper, report, or publication?
  │   └─ YES → Vega-Lite → SVG (--theme neutral for papers)
  ├─ Is this a candlestick, waterfall, sankey, treemap, or radar?
  │   └─ YES → Vega (full) → SVG (same --theme support)
  ├─ Is this a quick one-off visual with no local setup?
  │   └─ YES → QuickChart.io → PNG (~/Downloads/)
  ├─ Is this an interactive dashboard or BI tool?
  │   └─ YES → ECharts → HTML (project-based)
  ├─ Is this a headless server / automated report?
  │   └─ YES → Vega-Lite → PNG (Sharp, <500ms)
  └─ Default → Vega-Lite → SVG

First-Time Setup (Vega-Lite Engine)

# Install the onsen-chart-skill
npx skills add onsen-ai/chart-skill

# Install dependencies (one-time, ~50MB)
cd ${CLAUDE_SKILL_DIR} && npm install --production

QuickChart.io and ECharts engines require no local dependencies.

Best Practices

• Data never touches the shell — always write payloads to files with Write, then reference with --spec or -d @file
• Specify the engine explicitly in your instruction: "use Vega-Lite, bar chart, data: ..."
• Use Vega (--vega flag) when the chart type isn't in Vega-Lite's native marks
• Templates live in templates/ — copy, modify data, and re-render
• Themes apply to both Vega-Lite and full Vega — the renderer handles both