Agent skill

Chart Selector

Methodology for selecting optimal chart types based on data type and analysis purpose.

Apache-2.0Auto-check passedData & Analytics

Install Chart Selector

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .claude/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .claude/skills/chart-selector && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .claude/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .agents/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .agents/skills/chart-selector && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .agents/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .cursor/skills/chart-selector && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .cursor/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/revfactory/harness-100.git --path en/42-bi-dashboard/.claude/skills/chart-selector

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .gemini/skills/chart-selector && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .gemini/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .github/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .github/skills/chart-selector && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .github/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add revfactory/harness-100 --skill chart-selector -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install revfactory/harness-100 chart-selector --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/revfactory/harness-100.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/en/42-bi-dashboard/.claude/skills/chart-selector .opencode/skills/chart-selector && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "chart-selector" agent skill from https://github.com/revfactory/harness-100/tree/main/en/42-bi-dashboard/.claude/skills/chart-selector into .opencode/skills/chart-selector/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-selector", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: chart-selector
GitHub stars: 1.3k
Token cost: ~1.1k tokens
SKILL.md length: 62 words
Files: 1
Skills in repo: 96
Repo updated: Mar 22, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Methodology for selecting optimal chart types based on data type and analysis purpose.

Chart recommendation
SKILL.md covers Target Agents, Chart Selection Decision Tree, Detailed Chart Type Guide and Color Palette Guide, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Visualization type selection

What it does

Chart Selector is an agent skill from revfactory/harness-100. Methodology for selecting optimal chart types based on data type and analysis purpose. Use this skill for 'chart recommendation', 'visualization type selection', 'graph types', 'dashboard visualization design', and other data visualization design tasks. Note: writing D3.js/Chart.js code and operating Tableau/PowerBI are outside the scope of this skill.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Data & Analytics, covering Data visualization. It works with Chart.js, D3.js, Power BI and Tableau. The licence is Apache-2.0.

When your agent uses it

Chart recommendation
Visualization type selection
Dashboard visualization design
Other data visualization design tasks

Example prompts

“chart recommendation”
“visualization type selection”
“graph types”
“/chart-selector”

What it can do on your machine

Read from SKILL.md and the folder at commit 8e8d35c. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chart Selector loads about 1.1k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 62 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~92
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from revfactory/harness-100 at commit 8e8d35c, republished under its Apache-2.0 licence (© revfactory). 62 words, ~1,091 tokens.

Download SKILL.mdSave it as .claude/skills/chart-selector/SKILL.md (or your agent's skills folder).

name: chart-selector
description: Methodology for selecting optimal chart types based on data type and analysis purpose. Use this skill for 'chart recommendation', 'visualization type selection', 'graph types', 'dashboard visualization design', and other data visualization design tasks. Note: writing D3.js/Chart.js code and operating Tableau/PowerBI are outside the scope of this skill.

Chart Selector — Data Visualization Chart Selection Guide

A skill that enhances visualization design for the dashboard-builder.

Target Agents

dashboard-builder — Selects the optimal chart for the data
kpi-designer — Determines metric presentation methods

Chart Selection Decision Tree

Question 1: What are you trying to show?

├── Comparison > Question 2a
│   ├── Between items > Horizontal bar / Vertical bar
│   ├── Over time > Line chart / Area chart
│   └── Part-to-whole > Stacked bar / Pie (5 or fewer)
│
├── Trend > Line chart / Area chart
│   ├── Single metric > Line chart
│   ├── Multiple metrics > Multi-line (max 5)
│   └── Range display > Area chart
│
├── Distribution > Histogram / Box plot
│   ├── Single variable > Histogram
│   ├── Group comparison > Box plot
│   └── 2-variable relationship > Scatter plot
│
├── Composition > Pie / Donut / Treemap
│   ├── 2-5 items > Pie/Donut
│   ├── 6+ items > Treemap
│   └── Composition change over time > 100% stacked area
│
└── Relationship > Scatter / Bubble / Heatmap
    ├── 2 variables > Scatter plot
    ├── 3 variables > Bubble chart
    └── Matrix > Heatmap

Detailed Chart Type Guide

KPI Card

Purpose: Display key metrics at a glance
Suited for: Single number + change rate
Elements: Current value, period-over-period change, trend sparkline
Rules:
- Place at top of dashboard
- 3-6 cards is optimal
- Colors: Increase=green, Decrease=red (reverse for costs)

Line Chart

Purpose: Trends over time
Suited for: Continuous data, time series
Rules:
- Maximum 5 lines (excess: highlight + gray)
- Y-axis starts at 0 (except ratios)
- Hide markers with 10+ data points
- Annotate events (promotions, outages, etc.)

Bar Chart

Purpose: Comparison between items
Suited for: Categorical data
Rules:
- Vertical: Time-axis comparison (monthly, weekly)
- Horizontal: Item comparison (by product, by region) — better label readability
- Sort: By size (except time-based)
- Color: Same color, highlight only with accent

Pie/Donut

Purpose: Part-to-whole ratios
Suited for: 2-5 categories
Prohibited:
- 6+ items > Use treemap/horizontal bar
- Similar proportions > Incomparable, use bar
- 3D pie > Never use
Rules:
- Start at 12 o'clock, go clockwise
- Largest item first
- "Other" item last

Heatmap

Purpose: Express intensity in a 2D matrix
Suited for: Time x category, correlation matrix
Rules:
- Single color gradient (sequential)
- Diverging data: 2 colors from center
- Display values in cells (ensure readability)

Table

Purpose: Provide exact figures
Suited for: Multiple measures, detailed comparison
Rules:
- Sortable columns
- Conditional formatting (highlight top/bottom)
- Optional sparkline column
- 10-20 rows optimal (pagination)

Color Palette Guide

Sequential — Size/intensity

Low ──────────────── High
#F7FBFF > #6BAED6 > #08306B (blue)

Diverging — Bidirectional from center

Negative ──── 0 ──── Positive
#D73027 > #FFFFBF > #1A9850 (red-yellow-green)

Categorical — Distinction

Maximum 8 colors: supplement with patterns/labels if more needed
Accessibility: Use colorblind-safe palettes (viridis, ColorBrewer)

Dashboard Layout Principles

1. F-pattern: Left to right, top to bottom reading flow
2. Priority order: Key KPIs at top, details at bottom
3. Grouping: Place related charts close together
4. Whitespace: Sufficient spacing between charts
5. Responsive: 2 columns mobile, 3-4 columns desktop
6. Interaction: Filter > drill-down > detail sequence

Layout grid:
+----------+----------+----------+----------+
|  KPI 1   |  KPI 2   |  KPI 3   |  KPI 4   |  <- Summary
+----------+----+-----+----------+----------+
|  Trend Chart  |  Comparison   | Composition|  <- Analysis
+---------------+--------------+------------+
|            Detail Table                    |  <- Detail
+-------------------------------------------+

Files

Just SKILL.md in en/42-bi-dashboard/.claude/skills/chart-selector of revfactory/harness-100.

Open the folder on GitHubat commit 8e8d35c

Compare with similar skills

Chart Selector next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chart Selector compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Chart Selector this skillrevfactory/harness-100	1.3k	—	~1.1k	Automated safety check: Pass	Apache-2.0	6 mo ago
Tufte Data Vizcaylent/tufte-data-viz	223	—	~3.5k	Automated safety check: Pass	MIT	7 mo ago
Datavisforyourhealth111-pixel/Vibe-Skills	3.6k	—	~1.1k	Automated safety check: Pass	Apache-2.0	1 mo ago
D3 Vizcalesthio/OpenMontage	65k	3 repos	~5.4k	Automated safety check: Pass	AGPL-3.0	4 days ago
Agent D3js SkillDokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI	507	—	~753	Automated safety check: Pass	Custom licence	3 mo ago
Advanced Data VisualizationHack23/cia	239	—	~1.5k	Automated safety check: Pass	Apache-2.0	yesterday

Similar skills

Tufte Data Viz
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
223 GitHub stars~3.5k tokensUpdated 7 mo ago
Data & AnalyticsAuto-check passed
Datavis
foryourhealth111-pixel/Vibe-Skills
Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG.
3.6k GitHub stars~1.1k tokensUpdated 1 mo ago
Data & AnalyticsAuto-check passed
D3 Viz
calesthio/OpenMontage
Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.
65k GitHub starsUsed in 3 repos~5.4k tokens
Data & AnalyticsAuto-check passed
Agent D3js Skill
Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI
Creating interactive data visualisations using d3.js. An agent skill from Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI.
507 GitHub stars~753 tokensUpdated 3 mo ago
Data & AnalyticsAuto-check passed
Advanced Data Visualization
Hack23/cia
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
239 GitHub stars~1.5k tokensUpdated yesterday
Data & AnalyticsAuto-check passed
Tableau Dashboard Creator
Kilo-Org/kilo-marketplace
Takes a plain-language dashboard request through brand setup, data exploration, planning, an interactive HTML mock and a Tableau implementation spec.
190 GitHub stars~3.8k tokensUpdated 9 days ago
Data & AnalyticsAuto-check: notes

Questions about Chart Selector

What does Chart Selector do?

Methodology for selecting optimal chart types based on data type and analysis purpose. Chart Selector is an agent skill from revfactory/harness-100. Methodology for selecting optimal chart types based on data type and analysis purpose.

When should I use Chart Selector?

Chart Selector fits situations like: chart recommendation; visualization type selection; dashboard visualization design; other data visualization design tasks.

How do I install Chart Selector in Claude Code?

Run `npx skills add revfactory/harness-100 --skill chart-selector -a claude-code`. Or copy the skill folder (en/42-bi-dashboard/.claude/skills/chart-selector in revfactory/harness-100) into .claude/skills/chart-selector in your project. Claude Code loads it when a task matches its description.

How do I install Chart Selector in Codex?

Run `npx skills add revfactory/harness-100 --skill chart-selector -a codex`. Or copy the skill folder (en/42-bi-dashboard/.claude/skills/chart-selector in revfactory/harness-100) into .agents/skills/chart-selector in your project. Codex loads it when a task matches its description.

Can I use Chart Selector in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add revfactory/harness-100 --skill chart-selector -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-selector, .gemini/skills/chart-selector, .github/skills/chart-selector and .opencode/skills/chart-selector in your project.

What does Chart Selector need to run?

SKILL.md names no scripts, command-line tools or credentials: Chart Selector is instructions for the agent only.

Does Chart Selector access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Chart Selector safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Chart Selector use?

Chart Selector is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chart Selector use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Chart Selector?

Skills that share tags, products or a category with Chart Selector: Tufte Data Viz (caylent/tufte-data-viz, 223 stars), Datavis (foryourhealth111-pixel/Vibe-Skills, 3.6k stars), D3 Viz (calesthio/OpenMontage, 65k stars) and Agent D3js Skill (Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI, 507 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Selector?

revfactory (a GitHub user) maintains it in revfactory/harness-100, which has 1,293 GitHub stars. The repository holds 96 skills in this directory. The repository was last updated on March 22, 2026.

Source: revfactory/harness-100 on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Chart Selector

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Chart Selector — Data Visualization Chart Selection Guide

Target Agents

Chart Selection Decision Tree

Detailed Chart Type Guide

KPI Card

Line Chart

Bar Chart

Pie/Donut

Heatmap

Table

Color Palette Guide

Sequential — Size/intensity

Diverging — Bidirectional from center

Categorical — Distinction

Dashboard Layout Principles

Files

Compare with similar skills

Similar skills

More from revfactory/harness-100

Related

Questions about Chart Selector