ChartKit

A formal report figure tool for agents

中文 · Installation · Quick Start · Preview

---

ChartKit is a report figure tool for agents.

Users provide data, source materials, or a chart goal. The agent organizes the data and decides the chart intent. ChartKit exports the final figure as SVG, PDF, PNG, and TIFF images that can be inserted into formal reports.

Users can provide any material an agent can read and understand, such as:

• Excel, CSV, JSON, PDF, web pages, screenshots, or existing reports.
• Project data, business data, research materials, experiment results, or metric summaries.
• A clear analysis goal that the agent can research, organize, and turn into a chart.

Preview

These screenshots show ChartKit's default report figure output.

Distribution box plot	Delta bar chart	Clustered scatter plot
Correlation heatmap	Forest interval plot	Area trajectory chart
Benchmark bar chart	Ridge distribution plot	Signed effect heatmap
Validation line chart	Dual-axis mixed chart	Distribution histogram
Ranked Pareto contribution	Volcano scatter plot	Bubble matrix
Stacked area chart	Contribution waterfall	Radar benchmark profile
Event time series	Violin distribution plot	Percent stacked bar
Lollipop ranking chart	Slopegraph	Error-band time series
Proportion donut	Composite small multiples

Installation

1. Install the CLI

npm install -g @dztabel/chartkit
chart-kit --version

Output like this means the CLI is installed:

chart-kit 0.1.52

2. Install one Agent skill

The skill ships inside the npm package, so the copy you install always matches the CLI version you just installed. The commands below copy it from the global npm package into your agent's skill directory (re-run them after upgrading the CLI).

2.1 Codex

node -e "const cp=require('child_process'),fs=require('fs'),os=require('os'),path=require('path');const root=cp.execSync('npm root -g').toString().trim();const src=path.join(root,'@dztabel','chartkit','skills','chartkit-report-figure');const dest=path.join(os.homedir(),'.agents','skills','chartkit-report-figure');fs.rmSync(dest,{recursive:true,force:true});fs.mkdirSync(path.dirname(dest),{recursive:true});fs.cpSync(src,dest,{recursive:true});console.log('Codex skill installed from: '+src);"

Check the Codex skill installation:

node -e "const fs=require('fs'),os=require('os'),path=require('path');const p=path.join(os.homedir(),'.agents','skills','chartkit-report-figure','SKILL.md');if(!fs.existsSync(p))process.exit(1);console.log('Codex skill installed');"

Expected output:

Codex skill installed

Open Codex and type $chartkit-report-figure. If the skill can be selected with Tab, it is ready. If it does not appear, press Cmd+K / Ctrl+K, choose Force Reload Skills, or reopen Codex.

2.2 Claude Code

node -e "const cp=require('child_process'),fs=require('fs'),os=require('os'),path=require('path');const root=cp.execSync('npm root -g').toString().trim();const src=path.join(root,'@dztabel','chartkit','skills','chartkit-report-figure');const dest=path.join(os.homedir(),'.claude','skills','chartkit-report-figure');fs.rmSync(dest,{recursive:true,force:true});fs.mkdirSync(path.dirname(dest),{recursive:true});fs.cpSync(src,dest,{recursive:true});console.log('Claude Code skill installed from: '+src);"

Check the Claude Code skill installation:

node -e "const fs=require('fs'),os=require('os'),path=require('path');const p=path.join(os.homedir(),'.claude','skills','chartkit-report-figure','SKILL.md');if(!fs.existsSync(p))process.exit(1);console.log('Claude Code skill installed');"

Expected output:

Claude Code skill installed

Open Claude Code and type /chartkit-report-figure. If the skill can be selected, it is ready. If it does not appear, run /reload-skills and try again. Older Claude Code versions may need a window restart.

Quick Start

1. User provides data and asks for a report figure

$chartkit-report-figure Please read my uploaded sales Excel file and make a revenue trend comparison chart for a business review report.
/chartkit-report-figure Please read my uploaded sales Excel file and make a revenue trend comparison chart for a business review report.

2. User gives only an analysis goal, and the agent gathers the data

$chartkit-report-figure Please research China's energy storage installations over the past three years and make a trend chart for an industry research report.
/chartkit-report-figure Please research China's energy storage installations over the past three years and make a trend chart for an industry research report.

3. User has a conclusion, and the agent chooses the right chart

$chartkit-report-figure Please build a formal report figure around this conclusion: "Channel C was the main source of growth this quarter."
/chartkit-report-figure Please build a formal report figure around this conclusion: "Channel C was the main source of growth this quarter."

4. User revises a generated figure

$chartkit-report-figure Please make the chart more suitable for executives, highlight the top three contribution factors, and export it again.
/chartkit-report-figure Please make the chart more suitable for executives, highlight the top three contribution factors, and export it again.

The agent handles material reading, data organization, chart selection, image export, and quality checks.

Technical Details

The agent organizes a chart spec and calls:

chart-kit validate figure.json --theme business-cn
chart-kit build figure.json --out ./chart-output --theme business-cn --format all

ChartKit outputs:

chart-output/chart.svg
chart-output/chart.pdf
chart-output/chart.png
chart-output/chart.tiff
chart-output/chart-quality.json
chart-output/chart-manifest.json
chart-output/build-result.json

Chart types:

• Line / time series / mixed / area: line / time_series / mixed / area
• Bar chart: bar
• Scatter plot: scatter
• Heatmap / matrix chart: heatmap / network_matrix
• Distribution plot: distribution
• Interval plot / forest plot: interval
• Contribution / waterfall / ranking: contribution / ranked_contribution
• Proportion snapshot: proportion
• Radar chart / capability profile: radar
• Image plate: image_plate
• Schematic / process chart: schematic
• Small-multiples composite (same chart faceted across months/cohorts): composite
• Comparison presets: scaling_comparison / ablation_heatmap
• Trusted local script backends: custom_python / custom_r

Troubleshooting

The current public beta supports macOS Apple Silicon, Linux x64, and Windows x64.

If a global npm install skips optional dependencies, install the platform package explicitly:

# macOS Apple Silicon
npm install -g @dztabel/chartkit @dztabel/chartkit-darwin-arm64

# Linux x64
npm install -g @dztabel/chartkit @dztabel/chartkit-linux-x64

# Windows x64
npm install -g @dztabel/chartkit @dztabel/chartkit-win32-x64

When reporting a build failure, open an issue and include:

• chart-kit --version
• chart-output/chart-quality.json
• chart-output/build-result.json
• The smallest reproducible data sample or chart request

Repository Scope

The public GitHub repository contains npm wrapper metadata, the command shim, user documentation, and showcase preview assets. The npm package also includes the version-matched agent skill.

Renderer source code, schemas, themes, fonts, visual regression samples, and platform binaries are not included in this repository. Platform binaries are distributed through npm platform packages.

License

ChartKit is distributed through npm as a proprietary CLI binary. The public repository provides the wrapper, documentation, and showcase assets for installing and evaluating the CLI.