Home/Skills/Branded ECharts Visualizations
echarts · CLI + MCP

Branded ECharts Visualizations

Turn your brand's colours + fonts into polished, on-brand Apache ECharts charts — bar, line, pie, heatmap, radar, dashboards — rendered to SVG + PNG. Edit one brand file; every chart restyles.

Free · download
Quick answer

Turn your brand's colours + fonts into polished, on-brand Apache ECharts charts — bar, line, pie, heatmap, radar, dashboards — rendered to SVG + PNG. Edit one brand file; every chart restyles.

What this skill does

On-brand data visualization for Apache ECharts. Give it your brand's colour codes and fonts; it builds a complete ECharts theme and renders bar, line, area, pie/donut, scatter, KPI cards, heatmap, radar, treemap, and full dashboards to crisp SVG + PNG — server-side, no browser.

Example output

The same engine, styled entirely by one small brand file. Here's a monochrome theme — a scatter and a line chart:

Branded scatter chart — monochrome theme

Branded line chart — monochrome theme

Why it's different: all styling lives in one brand.json (palette + fonts + shape). Edit it and every chart restyles. The palette auto-extends and contrast-checks against your background, fonts embed via @font-face for pixel-true SVG (with a system fallback for PNG), and heatmaps use a clean single-hue ramp instead of an unreadable rainbow.

Ships with runnable Node render scripts, 14 chart-type recipes, two polished dark/monochrome demo brands (Onyx greyscale + Apricot peach), four reference docs, and a functional test. Drop it into .claude/skills/, point it at your brand, and generate a deck's worth of on-brand charts.

Get Branded ECharts Visualizations

Free to download — drops straight into .claude/skills/.