Registry / web-framework / vue-highcharts

vue-highcharts

library0.2.0jsnpmunverified

vue-highcharts is a component library that facilitates the integration of Highcharts, Highstock, Highmaps, and HighchartsGantt into Vue.js applications. The current stable version is 0.2.0, which targets Vue 3 exclusively. Previous versions (like 0.1.x) supported Vue 2. This library provides a straightforward way to globally register Highcharts components via `app.use()` or locally register them within individual components using `createHighcharts`. It allows for dynamic loading of Highcharts modules and add-ons like Stock, Map, Gantt, and Drilldown by passing the Highcharts object. Its key differentiator is its direct component-based approach for various Highcharts chart types, abstracting away much of the boilerplate for Vue 3 developers.

web-framework serialization

npm install vue-highcharts

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-HIGHCHARTS

vue-highcharts

web-frameworkjavascriptv0.2.0

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.

VueHighcharts

✓ import VueHighcharts from 'vue-highcharts';

✗ import { VueHighcharts } from 'vue-highcharts'; const VueHighcharts = require('vue-highcharts');

This is the default export used for global plugin registration with `app.use()` in Vue 3. CommonJS `require` is not supported in v0.2.0+ for direct imports, and it's not a named export.

createHighcharts

✓ import { createHighcharts } from 'vue-highcharts';

✗ import createHighcharts from 'vue-highcharts/createHighcharts'; const { createHighcharts } = require('vue-highcharts');

This named export is used for local component registration and was renamed from `genComponent` in v0.2.0. It accepts a chart name string and the Highcharts instance.

Highcharts modules

✓ import loadStock from 'highcharts/modules/stock.js';

✗ import { Stock } from 'highcharts/modules/stock';

Highcharts modules are imported individually and then loaded into the Highcharts instance by calling them with `Highcharts` as an argument (e.g., `loadStock(Highcharts)`). Paths should include `.js` for direct ESM import if not using a bundler that resolves them automatically.

This quickstart demonstrates how to globally register vue-highcharts in a Vue 3 application, including loading various Highcharts modules like Stock, Map, and Gantt, making their respective components (`<Highcharts>`, `<Highstock>`, `<Highmaps>`, `<HighchartsGantt>`) available throughout the application.

import { createApp } from 'vue'; import Highcharts from 'highcharts'; import VueHighcharts from 'vue-highcharts'; import App from './App.vue'; // Load additional Highcharts modules as needed import loadStock from 'highcharts/modules/stock.js'; import loadMap from 'highcharts/modules/map.js'; import loadGantt from 'highcharts/modules/gantt.js'; loadStock(Highcharts); loadMap(Highcharts); loadGantt(Highcharts); const app = createApp(App); app.use(VueHighcharts, { Highcharts }); // Example Vue component usage (e.g., in App.vue) // <template> // <div id="app"> // <Highcharts :options="chartOptions" /> // <Highstock :options="stockOptions" /> // <Highmaps :options="mapOptions" /> // </div> // </template> // <script> // export default { // data() { // return { // chartOptions: { // series: [{ // data: [1, 2, 3] // }] // }, // stockOptions: { // rangeSelector: { selected: 1 }, // series: [{ name: 'AAPL Stock', data: [[1600000000000, 100], [1600086400000, 105]] }] // }, // mapOptions: { // series: [{ // mapData: Highcharts.maps['custom/world'], // data: [['us', 10], ['ca', 20]] // }] // } // }; // } // }; // </script> app.mount('#app');

Debug

Known issues

breakingVersion 0.2.0 drops support for Vue 2. Applications using Vue 2 must remain on `vue-highcharts@0.1.x` and consult its specific documentation.

fix

For Vue 2 projects, install `npm i -S vue-highcharts@0.1`. For Vue 3 projects, ensure `vue` peer dependency is `^3.0.0`.

affects: >=0.2.0

breakingThe `Highcharts` object is now always required when registering the plugin globally via `app.use(VueHighcharts, { Highcharts })`.

fix

When globally registering, explicitly pass `{ Highcharts }` as the second argument to `app.use()`. Example: `app.use(VueHighcharts, { Highcharts });`

affects: >=0.2.0

breakingThe method for local component registration, `genComponent`, has been renamed to `createHighcharts` in version 0.2.0.

fix

Update all instances of `genComponent` to `createHighcharts`. Example: `import { createHighcharts } from 'vue-highcharts'; ... components: { Highcharts: createHighcharts('Highcharts', Highcharts) }`

affects: >=0.2.0

breakingVersion 0.1.0 removed the `vm.Highcharts` property, meaning the Highcharts instance is no longer directly exposed on the Vue instance.

fix

Import the `Highcharts` object directly from the `highcharts` package or retrieve it from the global scope if using direct `<script>` includes.

affects: >=0.1.0

breakingThe `<HighchartsRender />` component was removed in version 0.1.0. Its functionality was likely replaced by the new component registration patterns.

fix

Migrate usage of `<HighchartsRender />` to `<Highcharts />` or other specific chart components (`<Highstock />`, `<Highmaps />`, etc.) registered globally or locally.

affects: >=0.1.0

Errors

Common errors & fixes

Failed to resolve component: Highcharts. If this is a native HTML element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

The `Highcharts` component (or `Highstock`, `Highmaps`, etc.) was not registered globally or locally before use.

fix

Ensure `app.use(VueHighcharts, { Highcharts });` is called in your main application file (for global registration) or use `createHighcharts` within the `components` option of your Vue component (for local registration).

Uncaught TypeError: app.use is not a function

Attempting to use `app.use()` with a Vue 2 application or an incorrect `app` instance. `app.use` is a Vue 3 API.

fix

Confirm your project is running Vue 3. If on Vue 2, use `vue-highcharts@0.1.x` and its respective installation method (likely `Vue.use(VueHighcharts, { Highcharts });`).

Uncaught TypeError: Cannot read properties of undefined (reading 'Chart')

The `Highcharts` object was not correctly provided during plugin installation or component creation, leading to `vue-highcharts` being unable to find the core Highcharts library.

fix

Ensure `import Highcharts from 'highcharts';` is present and that `Highcharts` is passed correctly to `app.use(VueHighcharts, { Highcharts });` or `createHighcharts('Highcharts', Highcharts);`.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

highchartsrequiredRequired for charting functionality, provides the core Highcharts library.

vuerequiredThe framework this library builds upon; v0.2.0 specifically requires Vue 3.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/weizhenye/vue-highcharts ↗

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