Portaljs Add Chart Skill for Claude

Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.

2k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

2337

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/datopian/portaljs --skill portaljs-add-chart

The instruction itself

11 sections, as written by the author

PortalJS — Add Chart

Overview

Add a visualization to a dataset's showcase in a PortalJS portal. The skill installs

recharts (added directly — never @portaljs/components), writes a reusable client-side

Chart component into components/, and renders a <Chart /> into the Views section

of the showcase route pages/[owner]/[slug].tsx for one chosen dataset. The chart reads the

same /public/data/<file> the showcase <Table /> already uses, so no data is duplicated.

Five chart types are supported: line, bar, area, pie, and scatter.

Prerequisites

A scaffolded PortalJS portal (see portaljs-new-portal).
The target dataset already registered in datasets.json (see portaljs-add-dataset).
components/ui/parseCsv.ts present (ships with the template).
Node 18+ and npm available in the portal directory.

Instructions

The canonical, full step-by-step workflow is

.claude/commands/portaljs-add-chart.md —

the single source of truth. Read and follow it when executing. Summary:

Gather input — dataset slug, X column, Y column(s), chart type (default line), portal

directory. If any is missing, interview the user; never dead-end on a missing value.

Resolve the dataset from datasets.json (namespace, file, format).
Validate that the X and every Y column exist in the data file's header; warn on

non-numeric Y columns (values are coerced with Number()).

Install the chart library: npm install recharts@^2.15.0.
Write components/Chart.tsx (idempotent — do not overwrite a customized component).
Render <Chart /> into the Views section, gated on the dataset's (namespace, slug) so

other showcases are unaffected. Extend an existing view-dispatch block, do not overwrite.

Verify with npx tsc --noEmit.
Report the component, route, and dependency added.

Output

Created: components/Chart.tsx (recharts wrapper, if absent).
Modified: pages/[owner]/[slug].tsx (import + gated <Chart /> in Views);

package.json (recharts@^2.15.0).

Verified: npx tsc --noEmit passes.
Result: the chart renders at /@<namespace>/<slug> under a "Views" heading.

Error Handling

| Symptom | Cause | Fix |

| --- | --- | --- |

| Missing dataset/columns | Slug or column not in manifest/header | List available slugs/headers and re-prompt; do not error out. |

| Gaps in the chart | Non-numeric cells coerced to NaN | Clean the source data or pick a numeric Y column. |

| tsc failure | Bad column prop or import path | Fix the first reported error before reporting success. |

| Sluggish render | Over ~2,000 SVG points | Pre-aggregate the series (e.g. yearly buckets). |

Examples

Example 1 — Single line series

/portaljs-add-chart co2-emissions x=year y=emissions type=line

Example 2 — Multi-series bar chart

/portaljs-add-chart trade x=year y=imports,exports type=bar

Example 3 — Pie chart of a categorical breakdown

/portaljs-add-chart budget x=department y=amount type=pie

Resources

Full workflow: .claude/commands/portaljs-add-chart.md
Chart-type and prop reference: references/reference.md
Related skills: portaljs-add-dataset, portaljs-add-map, portaljs-define-schema
recharts documentation: <https://recharts.org/>

Other skills for the same job

different authors, same section of the catalogue

XLSX

by anthropics

vendor ×15

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.

MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.

UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.

7k tokens

How to use it

Copy the folder

Take datopian/portaljs-add-chart from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm, npx. Without those the skill loads but fails at the first command.