Registry / web-framework / highcharts-vue

highcharts-vue

library2.0.1jsnpmunverified

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.

web-framework communication

npm install highcharts-vue

package ↗homepage ↗

INSTALL

IMPORT

SIG · HIGHCHARTS-VUE

highcharts-vue

web-frameworkjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

HighchartsVue

✓ import HighchartsVue from 'highcharts-vue'

✗ import { HighchartsVue } from 'highcharts-vue'

This is the default export used primarily for global plugin registration with `app.use(HighchartsVue)` in Vue 3.

Chart

✓ import { Chart } from 'highcharts-vue'

✗ import Chart from 'highcharts-vue'

This is a named export used when registering the Highcharts component locally within a Vue component's `components` option.

Highcharts Modules

✓ import Highcharts from 'highcharts'; import exportingInit from 'highcharts/modules/exporting'; exportingInit(Highcharts);

✗ import { exporting } from 'highcharts/modules/exporting'

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.

Demonstrates how to locally register the `Chart` component, render a basic line chart with a required `options` prop, and enable the exporting module.

import { createApp, defineComponent, ref } from 'vue'; import Highcharts from 'highcharts'; import { Chart } from 'highcharts-vue'; import exportingInit from 'highcharts/modules/exporting'; // Initialize the exporting module for Highcharts exportingInit(Highcharts); const App = defineComponent({ components: { HighchartsChart: Chart // Renamed for clarity, can use 'Chart' directly }, setup() { const chartOptions = ref({ chart: { type: 'line' }, title: { text: 'My First Highcharts Vue Chart' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }, series: [{ name: 'Sample Data', data: [1, 3, 2, 4, 5] }], credits: { enabled: false // Disable Highcharts credits }, exporting: { enabled: true // Enable exporting functionality via the module } }); return { chartOptions }; }, template: ` <div id="app"> <h1>Highcharts-Vue Demo</h1> <HighchartsChart :options="chartOptions" /> </div> `, }); createApp(App).mount('#app');

Debug

Known issues

breakingVersion 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.

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`).

affects: >=2.0.0

gotchaHighcharts 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.

fix

Before using a module, ensure `import Highcharts from 'highcharts'` and `import moduleInit from 'highcharts/modules/modulename'`. Then call `moduleInit(Highcharts)`.

affects: >=1.0.0

gotcha`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.

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).

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'use')

Attempting to use `Vue.use(HighchartsVue)` with a Vue 3 `app` instance, or `app.use(HighchartsVue)` with a Vue 2 global `Vue` object.

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)`.

Component is missing template or render function.

The Highcharts component (`<highcharts>` or `<Chart>`) was used without the required `:options` prop, or the prop was empty/invalid.

fix

Provide a valid Highcharts configuration object to the component via the `:options` prop: `<HighchartsChart :options='chartOptions' />`. This prop is mandatory.

ReferenceError: Highcharts is not defined (or a module feature is missing)

The main `Highcharts` object or a specific Highcharts module was not imported or initialized correctly before being used by the `highcharts-vue` component.

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.

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

vuerequiredCore framework dependency for Vue components.

highchartsrequiredCore charting library that highcharts-vue integrates with.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/highcharts-vue ↗

homepagehttps://www.highcharts.com ↗