{"id":11035,"library":"highcharts-react-official","title":"Highcharts Official React Integration (Legacy)","description":"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.","status":"deprecated","version":"3.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/highcharts/highcharts-react","tags":["javascript","highcharts","highstock","highmaps","react","typescript"],"install":[{"cmd":"npm install highcharts-react-official","lang":"bash","label":"npm"},{"cmd":"yarn add highcharts-react-official","lang":"bash","label":"yarn"},{"cmd":"pnpm add highcharts-react-official","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Core Highcharts library, required to render charts.","package":"highcharts","optional":false}],"imports":[{"note":"While a default export `import HighchartsReact from 'highcharts-react-official'` might work in JavaScript, the named import is generally preferred, especially when using TypeScript, and aligns with modern module practices. The newer `@highcharts/react` package exclusively uses named exports.","wrong":"import HighchartsReact from 'highcharts-react-official';","symbol":"HighchartsReact","correct":"import { HighchartsReact } from 'highcharts-react-official';"},{"note":"The core Highcharts library should be imported separately and passed as a prop to `HighchartsReact`. ESM imports are standard for modern React applications. CommonJS `require` should be avoided for modern projects.","wrong":"const Highcharts = require('highcharts');","symbol":"Highcharts (core library)","correct":"import Highcharts from 'highcharts';"},{"note":"Highcharts modules are functions that extend the Highcharts object. They must be imported and then explicitly called with the Highcharts instance. Simply importing the module path might not correctly initialize it, especially in SSR environments or with aggressive tree-shaking. Always wrap module application in a `typeof Highcharts === 'object'` check for SSR compatibility.","wrong":"import 'highcharts/modules/exporting';","symbol":"Highcharts modules","correct":"import HighchartsExporting from 'highcharts/modules/exporting';\n// Apply module to Highcharts instance\nif (typeof Highcharts === 'object') { HighchartsExporting(Highcharts); }"}],"quickstart":{"code":"import React, { useRef, useEffect, useState } from 'react';\nimport Highcharts from 'highcharts';\nimport HighchartsExporting from 'highcharts/modules/exporting';\nimport HighchartsReact from 'highcharts-react-official';\n\n// Initialize Highcharts modules if Highcharts object is available\nif (typeof Highcharts === 'object') {\n  HighchartsExporting(Highcharts);\n}\n\nconst MyChartComponent = () => {\n  const chartComponentRef = useRef(null);\n  const [options, setOptions] = useState({\n    title: { text: 'My Sample Chart' },\n    series: [{\n      type: 'line',\n      data: [1, 2, 4, 6, 8, 7, 5, 3, 2, 1]\n    }],\n    chart: {\n      height: 400,\n      width: 600\n    },\n    credits: { enabled: false },\n    exporting: { enabled: true }\n  });\n\n  // Example of updating data after some time\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setOptions(prevOptions => ({\n        ...prevOptions,\n        series: [{\n          ...prevOptions.series[0],\n          data: [5, 7, 9, 8, 6, 4, 2, 1, 3, 5]\n        }]\n      }));\n    }, 3000);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div>\n      <h2>Highcharts with React</h2>\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        ref={chartComponentRef}\n      />\n      <p>This chart demonstrates basic line series, module integration (exporting), and reactive updates via component state.</p>\n    </div>\n  );\n};\n\nexport default MyChartComponent;","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"The `highcharts-react-official` package has been deprecated in favor of the new, officially supported `@highcharts/react` package (v4+). New projects should use `@highcharts/react` for improved API, ESM support, and better developer experience. Migration involves uninstalling the old package, installing the new one, and updating import statements and component props.","severity":"breaking","affected_versions":"All versions"},{"fix":"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.","message":"Highcharts mutates the chart `options` object internally. To ensure React's reconciliation works correctly and to avoid unexpected behavior, always pass immutable options objects or create new objects when updating chart properties.","severity":"gotcha","affected_versions":"All versions"},{"fix":"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); }`.","message":"Highcharts modules (e.g., exporting, drilldown, boost) are not automatically loaded and applied. They must be explicitly imported and then initialized by calling the module function with the Highcharts core instance.","severity":"gotcha","affected_versions":"All versions"},{"fix":"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')`.","message":"Highcharts is designed to run in a browser environment with access to the `window` and `document` objects. Server-Side Rendering (SSR) frameworks like Next.js will encounter errors if Highcharts components or modules are imported and executed on the server without proper safeguards.","severity":"gotcha","affected_versions":"All versions"},{"fix":"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.","message":"`highcharts-react-official` v3.x requires React `^16.8.0` and Highcharts `^6.0.0`. Attempting to use significantly newer React versions (e.g., React 18) or very old Highcharts versions might lead to compatibility issues or require specific configurations. The newer `@highcharts/react` package explicitly requires React 18 and Highcharts 12.2+.","severity":"breaking","affected_versions":">=3.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import Highcharts from 'highcharts';` is present, Highcharts modules are applied (`MyModule(Highcharts);`), and `<HighchartsReact highcharts={Highcharts} options={options} />` is used correctly.","cause":"Highcharts modules were not correctly initialized or the `highcharts` prop was not passed to `HighchartsReact`.","error":"TypeError: Cannot read properties of undefined (reading 'chart')"},{"fix":"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`.","cause":"The core Highcharts library was not imported, or its global presence (if not using the prop) was not guaranteed, especially in older CJS setups or non-modular environments.","error":"Highcharts is not defined"},{"fix":"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.","cause":"Attempting to use Highcharts from a CDN or non-module build in conjunction with the React wrapper, leading to module resolution or instance-sharing issues.","error":"TypeError: can't access property \"setHighcharts\", etc. with Highcharts CDN."},{"fix":"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.","cause":"The `options` object passed to `HighchartsReact` was mutated directly instead of providing a new, immutable object, or the `oneToOne` update parameter was not correctly handled in older versions.","error":"Chart not updating when props or state change."}],"ecosystem":"npm"}