highcharts-react

Highcharts React (@highcharts/react)

Only use @highcharts/react — the official Highcharts React package. All others are legacy and incompatible.

---

Workflow

1. Fetch docs for every concept before implementing.
2. Check rules before implementing.
3. 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