highcharts-react-official is the previous official React wrapper for the Highcharts charting library, now largely superseded by the newer `@highcharts/react` package. This library (v3.2.3) provides a declarative way to integrate Highcharts, Highstock, and Highmaps into React applications, abstracting away direct DOM manipulation. It supports React versions 16.8.0 and above, and Highcharts core versions 6.0.0 and up. Key features include passing chart options as props, lifecycle management for updates and unmounting, and basic integration with Highcharts modules. While functional and widely used in existing projects, new projects are strongly encouraged to use `@highcharts/react` (v4+), which offers a more 'React-native' API, full ES module support, improved TypeScript definitions, and custom component integration. Releases for `highcharts-react-official` are infrequent as development has shifted to the new package. Its primary differentiator was being the official wrapper, providing a stable, maintained bridge between Highcharts and React before the newer, more opinionated integration was developed. It ships with TypeScript types.
npm install highcharts-react-officialVerified import paths — ran on the pinned version, not inferred.
This quickstart renders a basic Highcharts line chart, demonstrates how to import and apply a Highcharts module (Exporting), and shows how to update chart data reactively using React's `useState` hook. It also correctly passes the Highcharts instance and handles potential SSR issues for module loading.
For new projects, use `npm install @highcharts/react highcharts react react-dom` and follow the migration guide to update imports and component structure. For existing projects, consider upgrading or ensuring compatibility with `highcharts-react-official`'s specific requirements.
When updating chart options, create a new options object using spread syntax (`{ ...prevOptions, series: [...] }`) instead of directly modifying the existing one. This signals to React and the wrapper that a change has occurred.Import each required module (e.g., `import HighchartsExporting from 'highcharts/modules/exporting';`) and then apply it to the Highcharts instance, typically wrapped in a check for SSR: `if (typeof Highcharts === 'object') { HighchartsExporting(Highcharts); }`.Use dynamic imports with `ssr: false` for Next.js, or conditionally render your chart component only after the component has mounted to ensure it runs only on the client-side (e.g., using `useEffect` or `useState` to track client-side rendering). Wrap module initializations in `if (typeof Highcharts === 'object')`.
Ensure your `react`, `react-dom`, and `highcharts` peer dependencies match the specified versions for `highcharts-react-official` (React >=16.8.0, Highcharts >=6.0.0). For React 18+, consider migrating to the `@highcharts/react` package.
Ensure `import Highcharts from 'highcharts';` is present, Highcharts modules are applied (`MyModule(Highcharts);`), and `<HighchartsReact highcharts={Highcharts} options={options} />` is used correctly.Always explicitly import `Highcharts` from the `highcharts` package and pass it via the `highcharts` prop to `HighchartsReact`. Avoid relying on `Highcharts` being globally available via `window`.
For modular React applications, install Highcharts via npm (`npm install highcharts`) and import it as a module (`import Highcharts from 'highcharts';`) rather than relying on CDN-loaded global Highcharts instances.
Always create a new `options` object (e.g., using spread syntax) when making changes that should trigger a chart update. In older versions of the wrapper, `oneToOne={true}` might have been required as a prop, though this is often default behavior now.