├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
    ├── highcharts-vue.js
    └── highcharts-vue.min.js
├── package.json
├── src
    ├── component.js
    ├── index.js
    └── utils.js
├── types
    └── highcharts-vue.d.ts
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         ["@babel/preset-env", { "modules": false }]
4 |     ]
5 | }


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | example
3 | node_modules
4 | webpack.config.js


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         browser: true
 4 |     },
 5 |     extends: [
 6 |         'eslint:recommended',
 7 |         'plugin:vue/vue3-essential'
 8 |     ],
 9 |     ignorePatterns: ['**/*.d.ts'],
10 |     overrides: [{
11 |         env: {
12 |             node: true
13 |         },
14 |         files: [
15 |             '.eslintrc.{js,cjs}'
16 |         ],
17 |         parserOptions: {
18 |             sourceType: 'script'
19 |         }
20 |     }],
21 |     parserOptions: {
22 |         ecmaVersion: 'latest',
23 |         sourceType: 'module'
24 |     },
25 |     plugins: ['vue'],
26 |     rules: {
27 |         indent: ['error', 4],
28 |         'linebreak-style': ['error', 'unix'],
29 |         quotes: ['error', 'single'],
30 |         semi: ['error', 'always'],
31 |         'comma-dangle': ['error', 'never'],
32 |         'quote-props': ['error', 'as-needed']
33 |     }
34 | };
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | package-lock.json


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | ### [2.0.1](https://github.com/highcharts/highcharts-vue/compare/v2.0.0...v2.0.1) (2024-03-15)
  6 | * Fixed a bug related to the type definitions (on all Vue 3 global components instead of only HighchartsVue).
  7 | 
  8 | ### [2.0.0](https://github.com/highcharts/highcharts-vue/pull/258) (2024-02-08)
  9 | * ❗ **From `highcharts-vue@2.0.0`, this package will only be compatible with Vue 3.** ❗
 10 | * Added full TypeScript support for Vue 3.
 11 | * Updated all the dev dependencies to the most recent versions.
 12 | * Got rid of Vue 2-related dependencies and potential security vulnerabilites.
 13 | * Got rid of Vue 2-specific code (and thus, reduced the bundle size).
 14 | * Got rid of the demo-v2 and demo-v3 examples.
 15 | 
 16 | ### [1.4.3](https://github.com/highcharts/highcharts-vue/compare/v1.4.2...v1.4.3) (2023-07-03)
 17 | * **chart update bugfix:** Fixed #239, chart object was reactive. ([076b6de](https://github.com/highcharts/highcharts-vue/pull/240/commits/076b6debef5c6b7c7a6f14685838972a7dbb1850))
 18 | * **Highcharts version updated in demos:** ([56bed69](https://github.com/highcharts/highcharts-vue/pull/241/commits/56bed694382839fd632cf7ada765997e4b183d9b))
 19 | 
 20 | ### [1.4.2](https://github.com/highcharts/highcharts-vue/compare/v1.4.1...v1.4.2) (2023-06-01)
 21 | * **chart object bugfix:** Fixed #235, chart object is now accessible again through ref. ([594d51c](https://github.com/highcharts/highcharts-vue/commit/c4d0f79cbf689a704fa9e27394c21b8a77ca7813))
 22 | 
 23 | ## [1.4.1](https://github.com/highcharts/highcharts-vue/compare/v1.4.0...v1.4.1) (2023-04-20)
 24 | 
 25 | ### Features
 26 | * **composition-api:** Added support for the Composition API. ([18532db](https://github.com/highcharts/highcharts-vue/pull/229/commits/18532db4dbb78c5a1fd89c0d79bc1579f50a20fe))
 27 | * **eslint update:** Updated Eslint version.
 28 | 
 29 | 
 30 | ## [1.4.0](https://github.com/highcharts/highcharts-vue/compare/v1.3.5...v1.4.0) (2021-05-26)
 31 | 
 32 | 
 33 | ### Features
 34 | 
 35 | * **demo-v3:** Added demo-v3 scripts. ([f969c0a](https://github.com/highcharts/highcharts-vue/commit/f969c0a020bdd964f8fca75ed309ba4aabf6e979))
 36 | * **docs:** Updated the docs. ([d51b1f8](https://github.com/highcharts/highcharts-vue/commit/d51b1f814b40d3f7cbe4799699e37f1316c700ba))
 37 | * **vue:** Added support for Vue v3 apps. ([268aef1](https://github.com/highcharts/highcharts-vue/commit/268aef1ce1b41a642540ebfa4aa0c8fb58351ef8))
 38 | 
 39 | 
 40 | ### Bug Fixes
 41 | 
 42 | * **tests:** Fixed tests, and get rid of Jest deprecation warnings. ([886187a](https://github.com/highcharts/highcharts-vue/commit/886187a335df84e40f1f5bba5dc9ba2d37e32994))
 43 | 
 44 | <a name="1.3.5"></a>
 45 | ## [1.3.5](https://github.com/highcharts/highcharts-vue/compare/v1.3.4...v1.3.5) (2019-05-29)
 46 | 
 47 | 
 48 | ### Bug Fixes
 49 | 
 50 | * **typescript:** Fixed TS1192 error, imported all from Highcharts package. Closes [#85](https://github.com/highcharts/highcharts-vue/issues/85) ([56defb6](https://github.com/highcharts/highcharts-vue/commit/56defb6))
 51 | * Fixed TypeScript definitions. ([e24dcce](https://github.com/highcharts/highcharts-vue/commit/e24dcce))
 52 | 
 53 | 
 54 | 
 55 | <a name="1.3.4"></a>
 56 | ## [1.3.4](https://github.com/highcharts/highcharts-vue/compare/v1.3.3...v1.3.4) (2019-05-22)
 57 | 
 58 | 
 59 | ### Bug Fixes
 60 | 
 61 | * **tests:** Added pre-commit tests running. Files field added to package.json. ([aed1af4](https://github.com/highcharts/highcharts-vue/commit/aed1af4))
 62 | 
 63 | 
 64 | 
 65 | <a name="1.3.3"></a>
 66 | ## [1.3.3](https://github.com/highcharts/highcharts-vue/compare/v1.3.2...v1.3.3) (2019-05-22)
 67 | 
 68 | 
 69 | ### Features
 70 | 
 71 | * **tests:** Jest tests added. ([c6c88c7](https://github.com/highcharts/highcharts-vue/commit/c6c88c7))
 72 | 
 73 | 
 74 | 
 75 | <a name="1.3.2"></a>
 76 | ## [1.3.2](https://github.com/highcharts/highcharts-vue/compare/v1.3.1...v1.3.2) (2019-05-21)
 77 | 
 78 | 
 79 | ### Bug Fixes
 80 | 
 81 | * **husky:** Including actual build in pre-commit hook. ([962d706](https://github.com/highcharts/highcharts-vue/commit/962d706))
 82 | * Infinite loop on init, when series.allAreas is set to true on map charts, closes [#80](https://github.com/highcharts/highcharts-vue/issues/80). ([9d4cf40](https://github.com/highcharts/highcharts-vue/commit/9d4cf40))
 83 | 
 84 | 
 85 | 
 86 | <a name="1.3.1"></a>
 87 | ## [1.3.1](https://github.com/highcharts/highcharts-vue/compare/v1.3.0...v1.3.1) (2019-05-09)
 88 | 
 89 | 
 90 | 
 91 | <a name="1.3.0"></a>
 92 | # [1.3.0](https://github.com/highcharts/highcharts-vue/compare/v1.2.0...v1.3.0) (2019-05-09)
 93 | 
 94 | 
 95 | ### Bug Fixes
 96 | 
 97 | * **#43, #49:** Webpack and Babel updated in demo app, worldmap structure changed. ([2a74914](https://github.com/highcharts/highcharts-vue/commit/2a74914)), closes [#43](https://github.com/highcharts/highcharts-vue/issues/43) [#49](https://github.com/highcharts/highcharts-vue/issues/49)
 98 | 
 99 | 
100 | ### Features
101 | 
102 | * Added 'deepCopyOnUpdate property.' ([2f87156](https://github.com/highcharts/highcharts-vue/commit/2f87156))
103 | * Added ability to indicate a specific Highcharts instance for component. ([6392791](https://github.com/highcharts/highcharts-vue/commit/6392791))
104 | * Added TypeScript support. Closed [#48](https://github.com/highcharts/highcharts-vue/issues/48) ([859f3f7](https://github.com/highcharts/highcharts-vue/commit/859f3f7))
105 | * Webpack configuration and output files unified. ([e63c2bd](https://github.com/highcharts/highcharts-vue/commit/e63c2bd))
106 | 
107 | 
108 | 
109 | <a name="1.2.0"></a>
110 | # [1.2.0](https://github.com/highcharts/highcharts-vue/compare/v1.1.0...v1.2.0) (2018-08-30)
111 | 
112 | 
113 | ### Bug Fixes
114 | 
115 | * **update:** Fixed errors on updating, caused by mutating data. ([276df46](https://github.com/highcharts/highcharts-vue/commit/276df46))
116 | 
117 | 
118 | ### Features
119 | 
120 | * **husky:** Husky added. ([17c0b9d](https://github.com/highcharts/highcharts-vue/commit/17c0b9d))
121 | 
122 | 
123 | 
124 | <a name="1.1.0"></a>
125 | # 1.1.0 (2018-08-27)
126 | 
127 | 
128 | ### Features
129 | 
130 | * **changelog:** Added changelog. ([62da229](https://github.com/highcharts/highcharts-vue/commit/62da229))


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Highcharts Vue
 2 | 
 3 | Copyright (c) 2018-2024, Highsoft
 4 | 
 5 | The software in Highcharts Vue repository is free and open source,
 6 | but as Highcharts Vue relies on Highcharts.js, it requires a valid
 7 | Highcharts license for commercial use.
 8 | 
 9 | Permission is hereby granted, free of charge, to any person obtaining
10 | a copy of this software and associated documentation files (the
11 | "Software"), to deal in the Software without restriction, including
12 | without limitation the rights to use, copy, modify, merge, publish,
13 | distribute, sublicense, and/or sell copies of the Software, and to
14 | permit persons to whom the Software is furnished to do so, subject to
15 | the following conditions:
16 | 
17 | The above copyright notice and this permission notice shall be
18 | included in all copies or substantial portions of the Software.
19 | 
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
21 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
22 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
23 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
24 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
25 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
26 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Highcharts-Vue
  2 | 
  3 | **The official Highcharts integration with Vue.**
  4 | 
  5 | > ❗ **_IMPORTANT NOTE:_** From `highcharts-vue@2.0.0`, this package offers support for Vue >= 3.0.0. If you'd like to use this package with Vue 2, you should stay with the latest versions of `highcharts-vue@1.x.x` (Note: [Vue2 is getting officially deprecated](https://blog.vuejs.org/posts/vue-2-eol)❗
  6 | 
  7 | ## Table of Contents
  8 | 
  9 | 1. [Getting started](#getting-started)
 10 |    1. [Requirements](#requirements)
 11 |    2. [Installation](#installation)
 12 | 2. [Usage](#usage)
 13 |    1. [Registering globally as a plugin](#registering-globally-as-a-plugin)
 14 |    2. [Registering locally in your component](#registering-locally-in-your-component)
 15 |    3. [Implementing stockChart, mapChart and ganttChart](#implementing-stockchart-mapchart-and-ganttchart)
 16 |    4. [Loading maps](#loading-maps)
 17 |    5. [Changing global component tag name](#changing-global-component-tag-name)
 18 |    6. [Chart callback parameter](#chart-callback-parameter)
 19 |    7. [Chart object reference](#chart-object-reference)
 20 |    8. [Using a specific Highcharts instance](#using-a-specific-highcharts-instance)
 21 | 3. [Demo apps](#demo-apps)
 22 | 4. [Online demos](#online-demos)
 23 | 5. [Component Properties](#component-properties)
 24 | 6. [Useful links](#useful-links)
 25 | 
 26 | ## Getting started
 27 | 
 28 | ### Requirements
 29 | 
 30 | - **Node.JS**, **NPM** installed globally in your OS
 31 | - **Vue**, **Highcharts** libraries (updated) installed in your project.
 32 |   Highcharts package version should be at least `v5.0.11`, but it is always better to keep it updated.
 33 | 
 34 | ### Installation
 35 | 
 36 | Install `highcharts-vue` package by:
 37 | 
 38 | ```cli
 39 | npm install highcharts-vue
 40 | ```
 41 | 
 42 | ### Usage
 43 | 
 44 | There are two ways of adding the Highcharts-Vue package to your project:
 45 | 
 46 | #### Registering globally as a plugin
 47 | 
 48 | The way described below is recommended when wanted to make the HighchartsVue component available from everywhere in your app. In your main app file should have Vue and Highcharts-Vue packages imported:
 49 | 
 50 | ```js
 51 | import Vue from "vue";
 52 | import HighchartsVue from "highcharts-vue";
 53 | ```
 54 | 
 55 | Next, you can register it as a plugin (depending on the version of Vue):
 56 | 
 57 | ```js
 58 | // for Vue 2
 59 | Vue.use(HighchartsVue);
 60 | 
 61 | // for Vue 3
 62 | app.use(HighchartsVue);
 63 | ```
 64 | 
 65 | #### Registering locally in your component
 66 | 
 67 | This option is recommended for direct use in specific components of your app. First, you should import the Chart component object from highcharts-vue package in your component file:
 68 | 
 69 | ```js
 70 | import { Chart } from "highcharts-vue";
 71 | ```
 72 | 
 73 | Then, you can use the `Chart` component in your Vue components.
 74 | 
 75 | _NOTE:_
 76 | _If you would like to use Highcharts-Vue integration by attaching it using `<script>` tag in your `<head>` section of HTML document, of course it is possible and you should use one of .js files from `dist` of this package directory. After that, the `HighchartsVue` object should be available from `window` scope. Here is the example with this way of implementation: [JSFiddle example](https://jsfiddle.net/BlackLabel/ukc2kqnb/)_
 77 | 
 78 | ### Configure
 79 | 
 80 | #### Options parameter
 81 | 
 82 | If you've done one of the above (importing and registering the integration), it allows you to use the Highcharts-Vue component in your app, just by adding `<highcharts>` html element, and passing chart configuration object by its `:options` parameter, which is **required**:
 83 | 
 84 | ```html
 85 | <highcharts :options="chartOptions"></highcharts>
 86 | ```
 87 | 
 88 | for example:
 89 | 
 90 | ```js
 91 | new Vue({
 92 |   data() {
 93 |     return {
 94 |       chartOptions: {
 95 |         series: [
 96 |           {
 97 |             data: [1, 2, 3], // sample data
 98 |           },
 99 |         ],
100 |       },
101 |     };
102 |   },
103 | });
104 | ```
105 | 
106 | #### Importing Highcharts modules
107 | 
108 | To use any of Highcharts modules, you're obligated to import that module to your file, as well as Highcharts package itself and add that module by passing Highcharts to it, for example:
109 | 
110 | ```js
111 | import Highcharts from "highcharts";
112 | import exportingInit from "highcharts/modules/exporting";
113 | 
114 | exportingInit(Highcharts);
115 | ```
116 | 
117 | Demo: https://codesandbox.io/s/highcharts-vue-demo-fv7m6
118 | 
119 | ##### Since Highcharts v12
120 | 
121 | > Please note that since Highcharts v12, there's a new way of loading modules, described in the Upgrade Nodes - https://www.highcharts.com/changelog/#highcharts-v12.0.0
122 | 
123 | Since Highcharts v12, the imported modules will be directly applied:
124 | 
125 | ```js
126 | import * as Highcharts from "highcharts";
127 | import "highcharts/modules/exporting";
128 | ```
129 | 
130 | #### Implementing stockChart, mapChart and ganttChart
131 | 
132 | Highcharts-Vue integration uses `chart` constructor by default, so if you need to implement `stockChart`, `mapChart` or `ganttChart`, just add `stock`, `map` or `gantt` module as described above and use `:constructor-type` parameter in your html component element:
133 | 
134 | ```js
135 | import Highcharts from "highcharts";
136 | import stockInit from "highcharts/modules/stock";
137 | 
138 | stockInit(Highcharts);
139 | ```
140 | 
141 | ```html
142 | <highcharts
143 |   :constructor-type="'stockChart'"
144 |   :options="chartOptions"
145 | ></highcharts>
146 | ```
147 | 
148 | Stock demo: https://codesandbox.io/s/highcharts-vue-demo-qkf43 <br>
149 | Map demo: https://codesandbox.io/s/highcharts-vue-demo-cop9z <br>
150 | Gantt demo: https://codesandbox.io/s/highcharts-vue-demo-s8gcg
151 | 
152 | ##### Since Highcharts v12
153 | 
154 | Since Highcharts v12, the imported modules will be directly applied:
155 | 
156 | ```js
157 | import * as Highcharts from "highcharts";
158 | import "highcharts/modules/stock";
159 | ```
160 | 
161 | #### Loading maps
162 | 
163 | There are two ways of loading maps and using them with this package. You can install the [@highcharts/map-collection`](https://www.npmjs.com/package/@highcharts/map-collection) npm package with all maps included, and then import that maps which you would like to use in your project:
164 | 
165 | ```js
166 | import Highcharts from "highcharts";
167 | import HighchartsMapModule from "highcharts/modules/map";
168 | import mapData from "@highcharts/map-collection/custom/world.geo.json";
169 | 
170 | HighchartsMapModule(Highcharts);
171 | 
172 | Highcharts.maps["myMapName"] = mapData;
173 | ```
174 | 
175 | If you won't install a package with all maps, there is an option to choose necessary map from [Highmaps collection](https://code.highcharts.com/mapdata/) collection and copy a map data into a new file in your project. Then just import it wherever you want, and use it in the same way like above.
176 | 
177 | _The [Demo apps](#demo-apps) included in this repository show the second approach._
178 | 
179 | Map demo: https://codesandbox.io/s/highcharts-vue-demo-cop9z
180 | 
181 | ##### Since Highcharts v12
182 | 
183 | Since Highcharts v12, the imported modules will be directly applied:
184 | 
185 | ```js
186 | import * as Highcharts from "highcharts";
187 | import "highcharts/modules/maps";
188 | import mapData from "@highcharts/map-collection/custom/world.geo.json";
189 | 
190 | Highcharts.maps["myMapName"] = mapData;
191 | ```
192 | 
193 | #### Changing global component tag name
194 | 
195 | If you would like to use global component tag name other than `<highcharts>`, you could achieve that by passing object with `tagName: [TAG_NAME]` pair as an option argument when registering the plugin, for example:
196 | 
197 | ```js
198 | import { createApp } from "vue";
199 | import App from "./App.vue";
200 | import HighchartsVue from "highcharts-vue";
201 | 
202 | const app = createApp(App);
203 | app.use(HighchartsVue, { tagName: "charts" });
204 | ```
205 | 
206 | It allows you to use:
207 | 
208 | ```html
209 | <charts :options="chartOptions"></charts>
210 | ```
211 | 
212 | #### Chart callback parameter
213 | 
214 | If you need to use callback from `Highcharts.chart(renderTo, options [, callback])` function, you could pass it by `:callback` parameter through HTML component element:
215 | 
216 | ```html
217 | <highcharts :options="chartOptions" :callback="someFunction"></highcharts>
218 | ```
219 | 
220 | Then, `someFunction` will be called when chart is loaded.
221 | 
222 | #### Chart object reference
223 | 
224 | You can access the Chart object instance if necessary (e.g when need to get some data or use any of `Chart.prototype` functions), by calling specific Vue component instance `chart` field, but it is _not supported_ to update the chart using its built-in functions, because that could cause a problems with data synchronization between your app and the chart itself (it disturbs conception of using integration packages). The most recommended way of implementing it, is to use it in the way presented in demo apps.
225 | 
226 | #### Using Highcharts `setOptions()` method
227 | 
228 | If you would like to use `Highcharts.setOptions()` method to define some parameters which would be set globally on all of charts, we recommend you to use it in the main file of your app, although there should be Highcharts package imported before.
229 | 
230 | ```js
231 | import * as Highcharts from "highcharts";
232 | 
233 | Highcharts.setOptions({
234 |   // options here
235 | });
236 | ```
237 | 
238 | #### Using a specific Highcharts instance
239 | 
240 | Occasionally you'll want to create your charts basing on specific Highcharts version for some reason. Then you can set it up in two different ways, depending on your individual needs.
241 | 
242 | The **first one** is by setting a Highcharts instance while registering the HighchartsVue component as a global plugin, by passing it through the `options` of Vue's install function, as below:
243 | 
244 | ```js
245 | import { createApp } from "vue";
246 | import App from "./App.vue";
247 | import * as Highcharts from "highcharts";
248 | import HighchartsVue from "highcharts-vue";
249 | 
250 | const app = createApp(App);
251 | app.use(HighchartsVue, {
252 |   highcharts: Highcharts,
253 | });
254 | ```
255 | 
256 | After doing it, all charts will be generated basing on passed instance.
257 | 
258 | A **second way** is to pass the Highcharts instance through the props of `highcharts` component. Then, as a result, only that chart will be generated basing on passed instance:
259 | 
260 | ```html
261 | <highcharts :options="chartOptions" :highcharts="hcInstance"></highcharts>
262 | ```
263 | 
264 | ```js
265 | import * as Highcharts from "highcharts";
266 | 
267 | export default {
268 |   name: "app",
269 |   data() {
270 |     return {
271 |       hcInstance: Highcharts,
272 |       chartOptions: {
273 |         series: [
274 |           {
275 |             data: [1, 2, 3],
276 |           },
277 |         ],
278 |       },
279 |     };
280 |   },
281 | };
282 | ```
283 | 
284 | _Note that both ways of usage are **optional**, because this package automatically uses available Highcharts instance by default from peer dependency._
285 | 
286 | Server always runs at `http://localhost:8080`, unless it's taken by another process. Then you need to manually copy & visit the address displayed in terminal.
287 | 
288 | ## Online demos
289 | 
290 | - Basic line: https://codesandbox.io/s/highcharts-vue-demo-ttner
291 | - Stock: https://codesandbox.io/s/highcharts-vue-demo-qkf43
292 | - Map: https://codesandbox.io/s/highcharts-vue-demo-cop9z
293 | - Gantt: https://codesandbox.io/s/highcharts-vue-demo-s8gcg
294 | - Store: https://codesandbox.io/s/highcharts-vue-demo-zrok6
295 | - NuxtJS (with SSR): https://codesandbox.io/s/z8jovxx04
296 | - Portals: https://codesandbox.io/s/highcharts-vue-demo-voo9m
297 | - Synchronized charts: https://codesandbox.io/s/vue-template-jyp7o
298 | 
299 | ## Component Properties
300 | 
301 | Here is the list of all available props allowed to pass directly to your `<highcharts>` component instance, which this integration is able to handle.
302 | 
303 | | Parameter           |   Type   | Required | Description                                                                                                                                                                                                                                                                                                                                                                                  |
304 | | ------------------- | :------: | :------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
305 | | `:options`          |  Object  |   yes    | Highcharts chart configuration object                                                                                                                                                                                                                                                                                                                                                        |
306 | | `:constructor-type` |  String  |    no    | Chart constructor type using to init specific chart. Allowed options: `'chart'`, `'stockChart'`, `'mapChart'`. First one is set for default.                                                                                                                                                                                                                                                 |
307 | | `:callback`         | Function |    no    | Function passed as a callback during chart init, and triggered when chart is loaded.                                                                                                                                                                                                                                                                                                         |
308 | | `:updateArgs`       |  Array   |    no    | Array of `update()`'s function optional arguments. Parameters should be defined in the same order like in native Highcharts function: `[redraw, oneToOne, animation]`. [Here](https://api.highcharts.com/class-reference/Highcharts.Chart#update) is a more specific description of the parameters.                                                                                          |
309 | | `:highcharts`       |  Object  |    no    | A specific Highcharts instance. It's useful when required to build charts using different Highcharts versions.                                                                                                                                                                                                                                                                               |
310 | | `:deepCopyOnUpdate` | Boolean  |    no    | Whether to make a deep copy of object passed to `Chart.update()` function. In order to avoid passing references of arrays, it's set to **true** by default. <br><br> **\*NOTE:** That can cause a decrease of performance while processing a big amount of data, because copying source data is much expensive, and then it's recommended to disable that option by setting it to `false`.\* |
311 | 
312 | ## Useful links
313 | 
314 | [Highcharts General Documentation](https://www.highcharts.com/docs)
315 | [Highcharts API](https://api.highcharts.com/highcharts/)
316 | 


--------------------------------------------------------------------------------
/dist/highcharts-vue.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory(require("highcharts"), require("vue"));
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define(["highcharts", "vue"], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["HighchartsVue"] = factory(require("highcharts"), require("vue"));
  8 | 	else
  9 | 		root["HighchartsVue"] = factory(root["Highcharts"], root["Vue"]);
 10 | })(self, (__WEBPACK_EXTERNAL_MODULE__879__, __WEBPACK_EXTERNAL_MODULE__744__) => {
 11 | return /******/ (() => { // webpackBootstrap
 12 | /******/ 	"use strict";
 13 | /******/ 	var __webpack_modules__ = ({
 14 | 
 15 | /***/ 879:
 16 | /***/ ((module) => {
 17 | 
 18 | module.exports = __WEBPACK_EXTERNAL_MODULE__879__;
 19 | 
 20 | /***/ }),
 21 | 
 22 | /***/ 744:
 23 | /***/ ((module) => {
 24 | 
 25 | module.exports = __WEBPACK_EXTERNAL_MODULE__744__;
 26 | 
 27 | /***/ })
 28 | 
 29 | /******/ 	});
 30 | /************************************************************************/
 31 | /******/ 	// The module cache
 32 | /******/ 	var __webpack_module_cache__ = {};
 33 | /******/ 	
 34 | /******/ 	// The require function
 35 | /******/ 	function __webpack_require__(moduleId) {
 36 | /******/ 		// Check if module is in cache
 37 | /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 38 | /******/ 		if (cachedModule !== undefined) {
 39 | /******/ 			return cachedModule.exports;
 40 | /******/ 		}
 41 | /******/ 		// Create a new module (and put it into the cache)
 42 | /******/ 		var module = __webpack_module_cache__[moduleId] = {
 43 | /******/ 			// no module.id needed
 44 | /******/ 			// no module.loaded needed
 45 | /******/ 			exports: {}
 46 | /******/ 		};
 47 | /******/ 	
 48 | /******/ 		// Execute the module function
 49 | /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 50 | /******/ 	
 51 | /******/ 		// Return the exports of the module
 52 | /******/ 		return module.exports;
 53 | /******/ 	}
 54 | /******/ 	
 55 | /************************************************************************/
 56 | /******/ 	/* webpack/runtime/compat get default export */
 57 | /******/ 	(() => {
 58 | /******/ 		// getDefaultExport function for compatibility with non-harmony modules
 59 | /******/ 		__webpack_require__.n = (module) => {
 60 | /******/ 			var getter = module && module.__esModule ?
 61 | /******/ 				() => (module['default']) :
 62 | /******/ 				() => (module);
 63 | /******/ 			__webpack_require__.d(getter, { a: getter });
 64 | /******/ 			return getter;
 65 | /******/ 		};
 66 | /******/ 	})();
 67 | /******/ 	
 68 | /******/ 	/* webpack/runtime/define property getters */
 69 | /******/ 	(() => {
 70 | /******/ 		// define getter functions for harmony exports
 71 | /******/ 		__webpack_require__.d = (exports, definition) => {
 72 | /******/ 			for(var key in definition) {
 73 | /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 74 | /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 75 | /******/ 				}
 76 | /******/ 			}
 77 | /******/ 		};
 78 | /******/ 	})();
 79 | /******/ 	
 80 | /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 81 | /******/ 	(() => {
 82 | /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 83 | /******/ 	})();
 84 | /******/ 	
 85 | /******/ 	/* webpack/runtime/make namespace object */
 86 | /******/ 	(() => {
 87 | /******/ 		// define __esModule on exports
 88 | /******/ 		__webpack_require__.r = (exports) => {
 89 | /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 90 | /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 91 | /******/ 			}
 92 | /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
 93 | /******/ 		};
 94 | /******/ 	})();
 95 | /******/ 	
 96 | /************************************************************************/
 97 | var __webpack_exports__ = {};
 98 | // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 99 | (() => {
100 | // ESM COMPAT FLAG
101 | __webpack_require__.r(__webpack_exports__);
102 | 
103 | // EXPORTS
104 | __webpack_require__.d(__webpack_exports__, {
105 |   Chart: () => (/* binding */ Chart),
106 |   "default": () => (/* binding */ install)
107 | });
108 | 
109 | // EXTERNAL MODULE: external {"root":"Highcharts","commonjs":"highcharts","commonjs2":"highcharts","amd":"highcharts"}
110 | var external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_ = __webpack_require__(879);
111 | var external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default = /*#__PURE__*/__webpack_require__.n(external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_);
112 | ;// CONCATENATED MODULE: ./src/utils.js
113 | 
114 | var copyObject = function copyObject(original, copyArray) {
115 |   // Initialize the copy based on the original's type
116 |   var copy = external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().isArray(original) ? [] : {};
117 | 
118 |   // Callback function to iterate on array or object elements
119 |   function callback(value, key) {
120 |     // Copy the contents of objects
121 |     if (external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().isObject(value, !copyArray) && !external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().isClass(value) && !external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().isDOMElement(value)) {
122 |       copy[key] = copyObject(value, copyArray); // recursive call
123 |     } else {
124 |       // Primitives are copied over directly
125 |       copy[key] = value;
126 |     }
127 |   }
128 |   if (external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().isArray(original)) {
129 |     original.forEach(function (item, index) {
130 |       return callback(item, index);
131 |     });
132 |   } else {
133 |     external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default().objectEach(original, callback);
134 |   }
135 |   return copy;
136 | };
137 | 
138 | // EXTERNAL MODULE: external {"root":"Vue","commonjs":"vue","commonjs2":"vue","amd":"vue"}
139 | var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(744);
140 | ;// CONCATENATED MODULE: ./src/component.js
141 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
142 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
143 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
144 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
145 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
146 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
147 | 
148 | 
149 | var generateVueComponent = function generateVueComponent(Highcharts) {
150 |   var _this = this;
151 |   return {
152 |     render: function render() {
153 |       return (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.h)('div', {
154 |         ref: 'chart'
155 |       });
156 |     },
157 |     beforeUnmount: function beforeUnmount() {
158 |       var _this$chart;
159 |       return _this === null || _this === void 0 || (_this$chart = _this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.destroy();
160 |     },
161 |     props: {
162 |       constructorType: {
163 |         type: String,
164 |         "default": 'chart'
165 |       },
166 |       options: {
167 |         type: Object,
168 |         required: true
169 |       },
170 |       callback: Function,
171 |       updateArgs: {
172 |         type: Array,
173 |         "default": function _default() {
174 |           return [true, true];
175 |         }
176 |       },
177 |       highcharts: {
178 |         type: Object
179 |       },
180 |       deepCopyOnUpdate: {
181 |         type: Boolean,
182 |         "default": true
183 |       }
184 |     },
185 |     watch: {
186 |       options: {
187 |         handler: function handler(newValue) {
188 |           var _this$chart2;
189 |           (_this$chart2 = this.chart).update.apply(_this$chart2, [copyObject(newValue, this.deepCopyOnUpdate)].concat(_toConsumableArray(this.updateArgs)));
190 |         },
191 |         deep: true
192 |       }
193 |     },
194 |     mounted: function mounted() {
195 |       var HC = this.highcharts || Highcharts;
196 |       if (!HC[this.constructorType]) {
197 |         console.error("'".concat(this.constructorType, "' constructor-type is incorrect. Sometimes this error is caused by the fact, that the corresponding module wasn't imported."));
198 |         return;
199 |       }
200 |       if (!this.options) {
201 |         console.error('The "options" parameter was not passed.');
202 |         return;
203 |       }
204 |       this.chart = HC[this.constructorType](this.$refs.chart, copyObject(this.options, true),
205 |       // Always pass the deep copy when generating a chart. #80
206 |       this.callback ? this.callback : null);
207 |     }
208 |   };
209 | };
210 | /* harmony default export */ const component = (generateVueComponent);
211 | ;// CONCATENATED MODULE: ./src/index.js
212 | 
213 | 
214 | var Chart = component((external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default()));
215 | function install(app) {
216 |   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
217 |   app.component(options.tagName || 'highcharts', component(options.highcharts || (external_root_Highcharts_commonjs_highcharts_commonjs2_highcharts_amd_highcharts_default())));
218 | }
219 | })();
220 | 
221 | /******/ 	return __webpack_exports__;
222 | /******/ })()
223 | ;
224 | });


--------------------------------------------------------------------------------
/dist/highcharts-vue.min.js:
--------------------------------------------------------------------------------
1 | !function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("highcharts"),require("vue")):"function"==typeof define&&define.amd?define(["highcharts","vue"],r):"object"==typeof exports?exports.HighchartsVue=r(require("highcharts"),require("vue")):t.HighchartsVue=r(t.Highcharts,t.Vue)}(self,((t,r)=>(()=>{"use strict";var e={879:r=>{r.exports=t},744:t=>{t.exports=r}},o={};function n(t){var r=o[t];if(void 0!==r)return r.exports;var a=o[t]={exports:{}};return e[t](a,a.exports,n),a.exports}n.n=t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return n.d(r,{a:r}),r},n.d=(t,r)=>{for(var e in r)n.o(r,e)&&!n.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:r[e]})},n.o=(t,r)=>Object.prototype.hasOwnProperty.call(t,r),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{Chart:()=>s,default:()=>h});var t=n(879),r=n.n(t),e=function t(e,o){var n=r().isArray(e)?[]:{};function a(e,a){!r().isObject(e,!o)||r().isClass(e)||r().isDOMElement(e)?n[a]=e:n[a]=t(e,o)}return r().isArray(e)?e.forEach((function(t,r){return a(t,r)})):r().objectEach(e,a),n},o=n(744);function i(t){return function(t){if(Array.isArray(t))return c(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,r){if(!t)return;if("string"==typeof t)return c(t,r);var e=Object.prototype.toString.call(t).slice(8,-1);"Object"===e&&t.constructor&&(e=t.constructor.name);if("Map"===e||"Set"===e)return Array.from(t);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return c(t,r)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,o=new Array(r);e<r;e++)o[e]=t[e];return o}const u=function(t){var r=this;return{render:function(){return(0,o.h)("div",{ref:"chart"})},beforeUnmount:function(){var t;return null==r||null===(t=r.chart)||void 0===t?void 0:t.destroy()},props:{constructorType:{type:String,default:"chart"},options:{type:Object,required:!0},callback:Function,updateArgs:{type:Array,default:function(){return[!0,!0]}},highcharts:{type:Object},deepCopyOnUpdate:{type:Boolean,default:!0}},watch:{options:{handler:function(t){var r;(r=this.chart).update.apply(r,[e(t,this.deepCopyOnUpdate)].concat(i(this.updateArgs)))},deep:!0}},mounted:function(){var r=this.highcharts||t;r[this.constructorType]?this.options?this.chart=r[this.constructorType](this.$refs.chart,e(this.options,!0),this.callback?this.callback:null):console.error('The "options" parameter was not passed.'):console.error("'".concat(this.constructorType,"' constructor-type is incorrect. Sometimes this error is caused by the fact, that the corresponding module wasn't imported."))}}};var s=u(r());function h(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(e.tagName||"highcharts",u(e.highcharts||r()))}})(),a})()));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "highcharts-vue",
 3 |     "version": "2.0.1",
 4 |     "description": "Integration that allows easy Highcharts use in Vue 3.",
 5 |     "main": "dist/highcharts-vue.min.js",
 6 |     "typings": "types/highcharts-vue.d.ts",
 7 |     "scripts": {
 8 |         "lint": "eslint --ext .js,.vue src",
 9 |         "build": "webpack"
10 |     },
11 |     "homepage": "https://github.com/highcharts/highcharts-vue#readme",
12 |     "keywords": [],
13 |     "author": "Jakub Szumiński <jakubszuminski0@gmail.com>",
14 |     "repository": {
15 |         "type": "git",
16 |         "url": "git+"
17 |     },
18 |     "bugs": {
19 |         "url": "https://github.com/highcharts/highcharts-vue/issues"
20 |     },
21 |     "license": "SEE LICENSE IN LICENSE",
22 |     "files": ["dist", "src", "types"],
23 |     "husky": {
24 |         "hooks": {
25 |             "pre-commit": "npm run lint"
26 |         }
27 |     },
28 |     "peerDependencies": {
29 |         "highcharts": ">=5.0.0",
30 |         "vue": ">=3.0.0"
31 |     },
32 |     "devDependencies": {
33 |         "@babel/core": "^7.23.9",
34 |         "@babel/preset-env": "^7.23.9",
35 |         "babel-loader": "^9.1.3",
36 |         "eslint": "^8.56.0",
37 |         "eslint-plugin-vue": "^9.21.1",
38 |         "husky": "^9.0.10",
39 |         "terser-webpack-plugin": "^5.3.10",
40 |         "vue": "^3.4.16",
41 |         "vue-loader": "^17.4.2",
42 |         "vue-template-compiler": "^2.7.16",
43 |         "webpack": "^5.90.1",
44 |         "webpack-cli": "^5.1.4"
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/component.js:
--------------------------------------------------------------------------------
 1 | import { copyObject } from './utils';
 2 | import { h } from 'vue';
 3 | 
 4 | const generateVueComponent = function (Highcharts) {
 5 |     return {
 6 |         render () { return h('div', { ref: 'chart' }); },
 7 |         beforeUnmount: () => this?.chart?.destroy(),
 8 |         props: {
 9 |             constructorType: {
10 |                 type: String,
11 |                 default: 'chart'
12 |             },
13 |             options: {
14 |                 type: Object,
15 |                 required: true
16 |             },
17 |             callback: Function,
18 |             updateArgs: {
19 |                 type: Array,
20 |                 default: () => [true, true]
21 |             },
22 |             highcharts: {
23 |                 type: Object
24 |             },
25 |             deepCopyOnUpdate: {
26 |                 type: Boolean,
27 |                 default: true
28 |             }
29 |         },
30 |         watch: {
31 |             options: {
32 |                 handler (newValue) {
33 |                     if (this.chart) {
34 |                         this.chart.update(
35 |                             copyObject(newValue, this.deepCopyOnUpdate),
36 |                             ...this.updateArgs
37 |                         );
38 |                     }
39 |                 },
40 |                 deep: true
41 |             }
42 |         },
43 |         mounted () {
44 |             const HC = this.highcharts || Highcharts;
45 | 
46 |             if (!HC[this.constructorType]) {
47 |                 console.error(`'${this.constructorType}' constructor-type is incorrect. Sometimes this error is caused by the fact, that the corresponding module wasn't imported.`);
48 |                 return;
49 |             }
50 | 
51 |             if (!this.options) {
52 |                 console.error('The "options" parameter was not passed.');
53 |                 return;
54 |             }
55 | 
56 |             this.chart = HC[this.constructorType](
57 |                 this.$refs.chart,
58 |                 copyObject(this.options, true), // Always pass the deep copy when generating a chart. #80
59 |                 this.callback ? this.callback : null
60 |             );
61 |         }
62 |     };
63 | };
64 | 
65 | export default generateVueComponent;
66 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import generateVueComponent from './component';
 2 | import Highcharts from 'highcharts';
 3 | 
 4 | export const Chart = generateVueComponent(Highcharts);
 5 | 
 6 | export default function install(app, options = {}) {
 7 |     app.component(
 8 |         options.tagName || 'highcharts',
 9 |         generateVueComponent(options.highcharts || Highcharts)
10 |     );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import H from 'highcharts';
 2 | 
 3 | const copyObject = function (original, copyArray) {
 4 |     // Initialize the copy based on the original's type
 5 |     const copy = H.isArray(original) ? [] : {};
 6 | 
 7 |     // Callback function to iterate on array or object elements
 8 |     function callback(value, key) {
 9 |         // Copy the contents of objects
10 |         if (
11 |             H.isObject(value, !copyArray) &&
12 |             !H.isClass(value) &&
13 |             !H.isDOMElement(value)
14 |         ) {
15 |             copy[key] = copyObject(value, copyArray); // recursive call
16 |         } else {
17 |             // Primitives are copied over directly
18 |             copy[key] = value;
19 |         }
20 |     }
21 | 
22 |     if (H.isArray(original)) {
23 |         original.forEach((item, index) => callback(item, index));
24 |     } else {
25 |         H.objectEach(original, callback);
26 |     }
27 | 
28 |     return copy;
29 | };
30 | 
31 | export { copyObject };
32 | 


--------------------------------------------------------------------------------
/types/highcharts-vue.d.ts:
--------------------------------------------------------------------------------
 1 | // Types for Vue3
 2 | import { DefineComponent, App } from 'vue';
 3 | import * as Highcharts from 'highcharts';
 4 | 
 5 | export interface ChartProps {
 6 |     constructorType?: string;
 7 |     options: Highcharts.Options;
 8 |     callback?: Highcharts.ChartCallbackFunction;
 9 |     updateArgs?: ChartUpdateArgs;
10 |     highcharts?: typeof Highcharts;
11 |     deepCopyOnUpdate?: boolean;
12 | }
13 | 
14 | declare module '@vue/runtime-core' {
15 |     export interface GlobalComponents {
16 |         HighchartsVue: DefineComponent<ChartProps, { chart: Highcharts.Chart }, {}>
17 |     }
18 | }
19 | 
20 | export type ChartUpdateArgs = [boolean, boolean, Highcharts.AnimationOptionsObject];
21 | 
22 | export const Chart: DefineComponent<ChartProps, { chart: Highcharts.Chart }>;
23 | 
24 | export interface HCVueInstallOptions {
25 |     tagName?: string;
26 |     highcharts?: typeof Highcharts;
27 | }
28 | 
29 | export default function install(app: App, options?: HCVueInstallOptions): void;
30 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const TerserPlugin = require('terser-webpack-plugin');
 3 | 
 4 | module.exports = {
 5 |     mode: 'production',
 6 |     entry: {
 7 |         'highcharts-vue': './src/index.js',
 8 |         'highcharts-vue.min': './src/index.js',
 9 |     },
10 |     output: {
11 |         filename: '[name].js',
12 |         library: 'HighchartsVue',
13 |         libraryTarget: 'umd',
14 |         path: path.resolve(__dirname, './dist'),
15 |     },
16 |     externals: {
17 |         highcharts: {
18 |             root: 'Highcharts',
19 |             commonjs: 'highcharts',
20 |             commonjs2: 'highcharts',
21 |             amd: 'highcharts'
22 |         },
23 |         vue: {
24 |             root: 'Vue',
25 |             commonjs: 'vue',
26 |             commonjs2: 'vue',
27 |             amd: 'vue'
28 |         }
29 |     },
30 |     module: {
31 |         rules: [{
32 |             test: /\.js$/,
33 |             exclude: /node_modules/,
34 |             loader: 'babel-loader'
35 |         }]
36 |     },
37 |     optimization: {
38 |         minimize: true,
39 |         minimizer: [new TerserPlugin({
40 |             include: /\.min\.js$/,
41 |         })],
42 |     },
43 | };
44 | 


--------------------------------------------------------------------------------