{"id":11036,"library":"highcharts-vue","title":"Highcharts-Vue Integration","description":"highcharts-vue is the official integration package for using the Highcharts charting library within Vue.js applications. Currently at version 2.0.1, it provides first-class support exclusively for Vue 3 applications. The 2.x.x series represents a major shift, with previous 1.x.x versions supporting Vue 2. This package requires both `vue` (>=3.0.0) and `highcharts` (>=5.0.0) as peer dependencies, which must be installed separately. It facilitates declarative chart rendering, module loading, and interaction with the underlying Highcharts chart instance. The project maintains an active release cadence, with recent updates focusing on Vue 3 features and documentation. Its primary differentiator is being the official Highcharts integration, ensuring optimal compatibility and adherence to best practices for Vue developers.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/highcharts/highcharts-vue#readme","tags":["javascript","typescript"],"install":[{"cmd":"npm install highcharts-vue","lang":"bash","label":"npm"},{"cmd":"yarn add highcharts-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add highcharts-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core framework dependency for Vue components.","package":"vue","optional":false},{"reason":"Core charting library that highcharts-vue integrates with.","package":"highcharts","optional":false}],"imports":[{"note":"This is the default export used primarily for global plugin registration with `app.use(HighchartsVue)` in Vue 3.","wrong":"import { HighchartsVue } from 'highcharts-vue'","symbol":"HighchartsVue","correct":"import HighchartsVue from 'highcharts-vue'"},{"note":"This is a named export used when registering the Highcharts component locally within a Vue component's `components` option.","wrong":"import Chart from 'highcharts-vue'","symbol":"Chart","correct":"import { Chart } from 'highcharts-vue'"},{"note":"Highcharts modules (e.g., `exporting`, `stock`, `map`, `gantt`) must be explicitly imported and initialized by passing the main `Highcharts` object to them. This pattern applies to all official Highcharts modules.","wrong":"import { exporting } from 'highcharts/modules/exporting'","symbol":"Highcharts Modules","correct":"import Highcharts from 'highcharts';\nimport exportingInit from 'highcharts/modules/exporting';\nexportingInit(Highcharts);"}],"quickstart":{"code":"import { createApp, defineComponent, ref } from 'vue';\nimport Highcharts from 'highcharts';\nimport { Chart } from 'highcharts-vue';\nimport exportingInit from 'highcharts/modules/exporting';\n\n// Initialize the exporting module for Highcharts\nexportingInit(Highcharts);\n\nconst App = defineComponent({\n components: {\n HighchartsChart: Chart // Renamed for clarity, can use 'Chart' directly\n },\n setup() {\n const chartOptions = ref({\n chart: {\n type: 'line'\n },\n title: {\n text: 'My First Highcharts Vue Chart'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']\n },\n series: [{\n name: 'Sample Data',\n data: [1, 3, 2, 4, 5]\n }],\n credits: {\n enabled: false // Disable Highcharts credits\n },\n exporting: {\n enabled: true // Enable exporting functionality via the module\n }\n });\n\n return {\n chartOptions\n };\n },\n template: `\n \n
Highcharts-Vue Demo
\n \n \n `,\n});\n\ncreateApp(App).mount('#app');","lang":"typescript","description":"Demonstrates how to locally register the `Chart` component, render a basic line chart with a required `options` prop, and enable the exporting module."},"warnings":[{"fix":"For Vue 3 projects, ensure `vue` is upgraded to `^3.0.0`. For existing Vue 2 projects, pin `highcharts-vue` to `~1.x.x` (e.g., `npm install highcharts-vue@^1`).","message":"Version 2.0.0 of `highcharts-vue` introduced a breaking change by dropping support for Vue 2, exclusively targeting Vue 3 and above. Applications using Vue 2 must remain on `highcharts-vue` versions 1.x.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Before using a module, ensure `import Highcharts from 'highcharts'` and `import moduleInit from 'highcharts/modules/modulename'`. Then call `moduleInit(Highcharts)`.","message":"Highcharts modules (e.g., `exporting`, `stock`, `map`, `gantt`) are not automatically included by `highcharts-vue`. They must be explicitly imported from `highcharts/modules/` and then initialized by calling the module function with the main `Highcharts` instance.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `npm install vue highcharts` (or `yarn add vue highcharts`) is executed in your project, with versions that satisfy the `highcharts-vue` peer dependency ranges (Vue >=3.0.0, Highcharts >=5.0.0 for 2.x versions).","message":"`highcharts-vue` lists `vue` and `highcharts` as peer dependencies. These core libraries are not installed automatically with `highcharts-vue` and must be explicitly installed in your project for the integration to function correctly.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Vue 3, ensure you are using `app.use(HighchartsVue)` where `app` is the result of `createApp()`. For Vue 2, use `Vue.use(HighchartsVue)`.","cause":"Attempting to use `Vue.use(HighchartsVue)` with a Vue 3 `app` instance, or `app.use(HighchartsVue)` with a Vue 2 global `Vue` object.","error":"Cannot read properties of undefined (reading 'use')"},{"fix":"Provide a valid Highcharts configuration object to the component via the `:options` prop: ``. This prop is mandatory.","cause":"The Highcharts component (`` or ``) was used without the required `:options` prop, or the prop was empty/invalid.","error":"Component is missing template or render function."},{"fix":"Ensure `import Highcharts from 'highcharts'` is present. For Highcharts modules, confirm that `import moduleInit from 'highcharts/modules/modulename'` and `moduleInit(Highcharts)` are called before the chart is rendered.","cause":"The main `Highcharts` object or a specific Highcharts module was not imported or initialized correctly before being used by the `highcharts-vue` component.","error":"ReferenceError: Highcharts is not defined (or a module feature is missing)"}],"ecosystem":"npm"}