{"id":11037,"library":"highcharts","title":"Highcharts Charting Library","description":"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.","status":"active","version":"12.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/highcharts/highcharts-dist","tags":["javascript","charts","dataviz","graphs","visualization","data","browserify","webpack","typescript"],"install":[{"cmd":"npm install highcharts","lang":"bash","label":"npm"},{"cmd":"yarn add highcharts","lang":"bash","label":"yarn"},{"cmd":"pnpm add highcharts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for client-side PDF export functionality, typically used via the exporting module. It is optional if PDF export is not needed.","package":"jspdf","optional":true},{"reason":"Peer dependency required by jspdf to enable SVG to PDF conversion, integral for chart export. It is optional if PDF export is not needed.","package":"svg2pdf.js","optional":true}],"imports":[{"note":"Highcharts is typically imported as a default export. While CommonJS `require` can technically work, ESM imports are the standard for modern bundlers, facilitating tree-shaking and type inference.","wrong":"const Highcharts = require('highcharts');","symbol":"Highcharts","correct":"import Highcharts from 'highcharts';"},{"note":"Highcharts modules typically extend the main Highcharts object via side effects upon import or by being passed the `Highcharts` object directly, rather than exporting specific named symbols themselves. Ensure the main `Highcharts` object is passed if the module expects it for initialization.","wrong":"import { Exporting } from 'highcharts/modules/exporting';","symbol":"Highcharts modules (e.g., Exporting, Stock, Map)","correct":"import Highcharts from 'highcharts';\nimport HighchartsExporting from 'highcharts/modules/exporting';\nHighchartsExporting(Highcharts);"},{"note":"The `Options` type is exclusively used for strictly typing chart configuration objects in TypeScript. It's a type-only import and should not be imported at runtime, hence the `type` keyword.","wrong":"import { Options } from 'highcharts';","symbol":"Options (TypeScript type)","correct":"import type { Options } from 'highcharts';"}],"quickstart":{"code":"import Highcharts from 'highcharts';\nimport HighchartsExporting from 'highcharts/modules/exporting';\nimport HighchartsSeriesLabel from 'highcharts/modules/series-label';\n\n// Initialize modules by passing the Highcharts instance to them\n// This attaches their functionality to the core Highcharts object.\nHighchartsExporting(Highcharts);\nHighchartsSeriesLabel(Highcharts);\n\n// Create a container element where the chart will be rendered\ndocument.body.innerHTML = '<div id=\"container\" style=\"width: 100%; height: 400px; margin-top: 20px;\"></div>';\n\n// Define the chart configuration using TypeScript types for clarity and strong typing\nconst chartOptions: Highcharts.Options = {\n    chart: {\n        type: 'line',\n        renderTo: 'container',\n        zoomType: 'x' // Enable zooming along the X-axis\n    },\n    title: {\n        text: 'Annual Temperature Trends',\n        align: 'left'\n    },\n    subtitle: {\n        text: 'Source: World Weather Data',\n        align: 'left'\n    },\n    xAxis: {\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n        title: { text: 'Month' }\n    },\n    yAxis: {\n        title: {\n            text: 'Temperature (°C)',\n        }\n    },\n    tooltip: {\n        valueSuffix: '°C' // Add unit to tooltip values\n    },\n    plotOptions: {\n        series: {\n            label: {\n                connectorAllowed: false // Disable connector lines for series labels\n            },\n            pointStart: 0 // Start points from category index 0\n        }\n    },\n    series: [\n        {\n            name: 'Tokyo',\n            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n        } as Highcharts.SeriesLineOptions, // Type assertion for specific series type\n        {\n            name: 'New York',\n            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n        } as Highcharts.SeriesLineOptions\n    ],\n    responsive: {\n        rules: [{\n            condition: {\n                maxWidth: 500\n            },\n            chartOptions: {\n                legend: {\n                    layout: 'horizontal',\n                    align: 'center',\n                    verticalAlign: 'bottom'\n                }\n            }\n        }]\n    },\n    credits: {\n        enabled: false // Commonly disabled for cleaner integration in applications\n    },\n    exporting: {\n        enabled: true // Enables the download CSV, PNG, PDF options provided by the module\n    }\n};\n\n// Create the chart instance by passing the configuration options\nHighcharts.chart(chartOptions);\n","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Highcharts is distributed under a proprietary license. It is free for non-commercial use, but commercial projects and applications require a valid commercial license. Using it commercially without a license is a breach of the licensing agreement.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"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.","message":"This npm package (`highcharts`) is primarily designed for client-side rendering within web browsers, typically bundled with tools like Webpack or Vite. It is not intended for generating static charts on a Node.js server-side environment directly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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);`).","message":"Highcharts modules (e.g., `highcharts/modules/exporting`, `highcharts/modules/stock`, `highcharts/modules/map`) do not always export named symbols directly. They typically extend the core `Highcharts` object or add functionality through side effects upon import or by being explicitly passed the `Highcharts` object.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"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.","message":"While the complete `highcharts` npm package directory can appear large, its core library (`highcharts.js`) is highly optimized for performance and small bundle size (typically <100kB gzipped) when used with ES6 module support and tree-shaking. The larger package size includes all available modules, extensive TypeScript typings, and various loading options.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"The Highcharts library was not correctly imported or loaded into the execution scope before your application code attempted to use it.","error":"ReferenceError: Highcharts is not defined"},{"fix":"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.","cause":"You are attempting to use a chart type (e.g., `stockChart`, `mapChart`, `ganttChart`, or specific series types like `treemap`) for which the corresponding Highcharts module has not been loaded or initialized.","error":"Highcharts error #17: This chart type is not supported in the current Highcharts setup. Did you forget to include a module?"},{"fix":"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`).","cause":"This verbatim message indicates that the Highcharts library's internal checks have determined that your usage context requires a commercial license, or your license key (if applicable) is incorrectly configured or missing.","error":"Error: Highcharts is free for non-commercial use, but commercial projects require a license."}],"ecosystem":"npm"}