ThoughtSpot Amuzing chart skills
Describe a chart. Get a ThoughtSpot custom chart that has already been rendered and checked.
Two Claude skills that build ThoughtSpot custom charts (BYOC), in 2D or interactive 3D, and whole Liveboards of them,by running the code in a real browser until it looks right.
Website · Install · How it works · Chart libraries · 3D charts · The chart library · Check your setup
What you get
- A chart that was seen, not guessed. Claude writes
chart.html, chart.css and chart.js, screenshots the render, reads the screenshot, fixes the worst defect and repeats, up to 8 times.
- No porting step. The preview runs the same three files you paste, through a stub of ThoughtSpot's
viz host, so what was checked is what ships.
- Edge cases checked. Missing, object-wrapped and empty data, no host at all, and narrow and wide tiles.
- Real data when connected. With the ThoughtSpot MCP, each chart is built on the exact output of its own search, and can be saved as an answer.
- Whole Liveboards. The second skill plans numbered tabs on a real model, has each tile built, adds filters, imports, proves the import and screenshots every tab.
- Your choice of library. You pick one, or let Claude pick by shape: MayaCharts, D3, ECharts, Plotly, Chart.js, Three.js, gridjs, HTML tables or raw SVG.
- 2D or 3D. Three.js tiles you drag to turn and click into, most with a second view one toggle away.
Two skills
| Skill | Use it to |
|---|
| ts-object-answer-chart-builder | Build, rebuild, debug or convert one chart. Start from a description, a screenshot of a chart, or a tile that misbehaves. Ships 58 proven charts. |
| ts-object-liveboard-chart-builder | Build a storytelling Liveboard of those charts on a real model through the ThoughtSpot MCP. Needs the chart skill installed beside it. |
Install
Claude Code. Copy both skills into your project, or symlink them once for every project:
git clone [email protected]:BibekTS/Thoughtspot-Amuzing-chart-skills.git
mkdir -p your-project/.claude/skills
cp -R Thoughtspot-Amuzing-chart-skills/skills/* your-project/.claude/skills/
# or: for s in ts-object-answer-chart-builder ts-object-liveboard-chart-builder; do ln -s "$PWD/Thoughtspot-Amuzing-chart-skills/skills/$s" ~/.claude/skills/$s; done
Needs Node 20+. The first run installs Playwright and Chromium (about 2 min, asked once).
Claude app. Turn on Settings → Capabilities → Code execution and file creation, build the bundle, and upload it under Settings → Capabilities → Skills:
cd skills && zip -r ../ts-object-answer-chart-builder.zip ts-object-answer-chart-builder -x '*/node_modules/*' '*.DS_Store' '*/library/*/preview.png'
Same for ts-object-liveboard-chart-builder. In the app the Liveboard skill cannot take the in-cluster screenshots, because they need a browser window you sign in to.
Use it. Ask for a chart ("a diverging bar of revenue vs target by region"), attach a screenshot, point it at a tile that misbehaves, or run /ts-object-answer-chart-builder. Paste chart.html, chart.css and chart.js into the HTML, CSS and JS tabs of your custom chart.
Runs and deliverables land in ~/.cache/ts-charts/ (or $XDG_CACHE_HOME), never inside a repo. TS_CHART_HOME and TS_CHART_OUTPUT_ROOT override that.
How it works
- Intake. Pick-from-a-list questions: model, data mode, search, chart library, destination.
- Frozen sample. The data mode is settled and the rows are frozen for the run (your CSV if you bring one).
- Loop. Edit, screenshot, critique with vision, fix. It stops early on a match, and asks you if it is getting nowhere.
- Checks. Data edge cases, tile resizes and pointer interaction.
- Deliverables. The three files, a
preview.png and a README.md naming the exact search to build.
| Claude Code | Claude app |
|---|
| Preview | A Chromium window you watch | Headless; each attempt comes back as a PNG |
| First run | Installs Playwright + Chromium | Installs playwright-core, uses the sandbox's Chromium |
| Libraries | All | HTML tables and raw SVG are fully previewed; CDN libraries are usually blocked, so those charts are written and marked not previewed |
Chart libraries
The skill builds in any of these. Ask for one by name, or let Claude pick by the chart's shape:
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
