主要功能

• 响应式设计

  

  图表能够自动响应 state 与 props 的变化。您可以将数据绑定到 useState、useReducer 或任意状态管理工具（如 Redux、Zustand、Jotai），图表只会重新渲染发生变化的部分，无需再手动调用命令式的 chart.update() 方法。

• TypeScript 优先

  

  npm 包中已内置完整的 TypeScript 类型声明，无需额外安装 @types/ 包。在 VS Code 及其他支持 TypeScript 的编辑器中，您可以获得所有配置项、属性和事件的自动补全能力。同时完全兼容严格模式（strict mode）以及现代 moduleResolution: bundler 配置。

• 原生支持 Next.js 与 SSR

  

  可直接兼容 Next.js App Router 与 Pages Router。只需在图表文件中添加 'use client'，即可在 Server Components 中获取数据，并在客户端完成图表渲染，无需任何特殊配置。

• 自定义组件集成

  

  可直接在 Tooltip（提示框）、数据标签（Data Labels）以及数据点渲染器中使用您的设计系统组件，并且这些内容会以真正的 React 组件方式渲染，而不是注入式 HTML。无需使用 dangerouslySetInnerHTML，也不需要任何 DOM “逃逸”方案。

• 全面支持 ES Modules

  

  支持如下深度导入方式: "@highcharts/react/series/Line" Vite、Webpack、Turbopack 等构建工具能够精准识别需要打包的内容，实现更彻底的 Tree-shaking，仅保留应用真正需要的代码。

• 支持全部图表类型

  

  Highcharts 的每一种图表类型都拥有专属的 JSX 入口。从：<Series type="line">到：<StockChart>，<MapChart>，<GanttChart>以及更多高级图表类型，都可以直接使用。导入方式能够准确表达图表意图，让代码结构更加清晰、语义化。