Highcharts is a robust, pure JavaScript/TypeScript charting framework engineered for creating highly responsive, interactive, and accessible charts across web and mobile platforms. The current stable version is 12.6.0. It offers a comprehensive suite encompassing core charting functionalities, specialized financial charts (Highcharts Stock), geographical maps (Highcharts Maps), and project management Gantt charts. Key differentiators include its lightweight core library, which is under 100kB gzipped with zero external dependencies, comprehensive ES6 module support enabling efficient tree-shaking for minimal bundle sizes, extensive customizability through code or CSS, and built-in accessibility features such as keyboard navigation and screen reader support. It seamlessly integrates with popular frontend frameworks and any backend stack, primarily focusing on client-side rendering with bundlers, while advising the use of `highcharts-export-server` for static server-side chart generation.
npm install highchartsVerified import paths — ran on the pinned version, not inferred.
This quickstart initializes Highcharts with two commonly used modules (exporting for data/image export and series-label for better readability). It then renders a basic line chart displaying temperature trends, demonstrating a typical setup for a modern web application using TypeScript and Highcharts.
Review the Highcharts licensing terms at highcharts.com/license. For commercial use, purchase an appropriate license from Highcharts and ensure any required license keys or attributions are correctly integrated into your project.
For server-side static chart generation (e.g., for reports or APIs), use the dedicated `highcharts-export-server` npm package, which is specifically built for that purpose.
After importing the main `Highcharts` library, import the desired module (e.g., `import HighchartsExporting from 'highcharts/modules/exporting';`). Then, initialize the module by passing the main `Highcharts` object to it (e.g., `HighchartsExporting(Highcharts);`).
Always use a modern JavaScript bundler (e.g., Webpack, Vite, Rollup) with ES6 imports to leverage tree-shaking capabilities. Only import the specific Highcharts modules and components you actively use to keep your final application bundle size minimal.
Ensure you are using `import Highcharts from 'highcharts';` at the top of your module file, or that the Highcharts script is properly included and available in the global scope if you're using a script tag.
Identify the missing module required for your specific chart type (e.g., `highcharts/modules/stock.js`, `highcharts/modules/map.js`, `highcharts/modules/treemap.js`). Import it and ensure it's initialized by passing the main `Highcharts` object as described in the warnings.
Verify your project's licensing status. If it's a commercial project, acquire a commercial license from highcharts.com. If you have a license, consult Highcharts documentation on how to correctly apply it for your specific setup (e.g., through `Highcharts.setOptions`).