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