| name | highcharts-react |
| description | Use to implement, configure, and troubleshoot Highcharts in React projects. Trigger for Highcharts-related chart or data visualization work — when in doubt, use this skill if Highcharts is a candidate. |
Highcharts React (@highcharts/react)
Only use @highcharts/react — the official Highcharts React package. All others are legacy and incompatible.
Workflow
- Fetch docs for every concept before implementing.
- Check rules before implementing.
- Implement based on the fetched docs and rules.
Fetch docs before implementing
Fetch docs for every concept the query touches across all three tables in parallel — skipping any will cause broken implementations.
Topics
Chart element components
Module components
Rules
- Never call imperative Highcharts methods — always update through React state to keep React and Highcharts states in sync.
- Never nest series components inside axis or option components — the library only resolves them as direct children of the chart root.
- Never use React hooks inside wrapped components — Highcharts React calls wrapper functions directly, outside React's rendering cycle, to minimize overhead. Define state in the parent and pass it via props instead.
- Always prefer JSX children over the
options prop for chart configuration to keep the code declarative and maintainable.
- Always prefer dedicated series components over the generic
Series to keep the code maintainable — use Series only for dynamic series.
- Always prefer core Highcharts over full product bundles — import only the modules you need to optimize bundle size and performance.
- Always add
'use client' to files using Highcharts in projects using React Server Components — Highcharts requires a browser environment.
Imports
| What | From |
|---|
| Chart element components | @highcharts/react |
| Series components | @highcharts/react/series/<PascalCaseName> |
| Module components | @highcharts/react/modules/<PascalCaseName> |
| Additional modules | highcharts/es-modules/masters/modules/<module-name>.src.js |
