Stars

/portaljs-add-chart

/portaljs-add-chart adds a chart view to an existing dataset's showcase. It installs recharts, writes a reusable client-side Chart component into the portal's components/, and adds a <Chart /> into the Views section of the showcase route (pages/[owner]/[slug].tsx), keyed to the chosen (namespace, slug). The chart reads the same /public/data/* file the dataset's table already uses — no data is duplicated.

When to use it

Run it after /portaljs-add-dataset has added the dataset you want to chart.

Inputs

InputRequiredNotes
DatasetYesThe dataset slug (e.g. country-codes). The dataset must already exist in datasets.json.
X axis columnYesThe column for the category / X axis (e.g. year).
Y axis column(s)YesOne or more numeric columns to plot (e.g. population or imports,exports).
Chart typeNoline (default), bar, area, pie, or scatter.
Portal directoryNoPath to the portal project. Defaults to the current directory.
TitleNoChart heading. Defaults to one derived from the Y columns.

The skill validates that the requested columns exist in the data and warns if a Y column looks non-numeric (values are coerced with Number()). Pie and scatter use the first Y column only; pass extra Y columns for multi-series line, bar, or area charts.

Example

/portaljs-add-chart country-codes --x year --y population --type line

In natural language:

/portaljs-add-chart the population dataset — plot population over year as a line chart

What it produces

  • recharts added to package.json (installed directly — not the heavier @portaljs/components bundle).
  • A reusable components/Chart.tsx (written once; an existing customized component is never overwritten).
  • A <Chart /> view added to the Views section of the showcase route (pages/[owner]/[slug].tsx), rendered only for the chosen dataset's (namespace, slug). No separate page is created and nothing is registered on the home page.

It type-checks the project (tsc --noEmit) before reporting success. When it finishes:

✓ Chart added to country-codes
  - Component: components/Chart.tsx (recharts)
  - View: pages/[owner]/[slug].tsx — <Chart type="line" x="year" y="population"> for @reference/country-codes
  - Dependency: recharts@^2.15.0 added to package.json

recharts 2.15 declares React 19 support, but its bundled react-is must match
your React. The catalog template pins "overrides": { "react-is": "^19.0.0" }
in package.json so this works out of the box on React 19.

Where to go next

PrevNext Lesson