Portaljs add chart

Skill jeremylongshore/claude-code-plugins-plus-skills/plugins/community/portaljs/skills/portaljs-add-chart

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.From its SKILL.md

Install

npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill portaljs-add-chart

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.1 KB, 915 tokens by cl100k_base, as published. Nobody here has run it

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/

What ships with it: 1 file

2.2 KB alongside SKILL.md

references/

reference.md2.2 KB

Gives 0 of the 12 instructions most data analysis skills give in 915 tokens

Counted across 286 of the 286 authors here whose files we hold, read 2026-08-07

Use excel formulas instead of hardcoded calculated valuesin 35 of 286, across 7 files
Match existing template conventions when modifying filesin 35 of 286, across 7 files
Document sources for all hardcoded valuesin 35 of 286, across 7 files
Write minimal concise python codein 35 of 286, across 7 files
Place all assumptions in separate assumption cellsin 32 of 286, across 5 files
Apply industry-standard color coding to financial modelsin 31 of 286, across 5 files
Format years as text stringsin 30 of 286, across 3 files
Recalculate formulas using recalc.py after modificationsin 30 of 286, across 3 files
Format negative numbers using parenthesesin 30 of 286, across 3 files
Fix all identified formula errors before finishingin 27 of 286, across 1 file
Use colorblind-safe palettesin 19 of 286, across 14 files
Name tests after the prevented bugin 13 of 286, across 8 files

Said here and by no other author read

read and follow the canonical workflow document
gather required chart inputs from the user
validate x and y columns against data header
install recharts
write a reusable chart component if absent
render chart in the showcase views section

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.