Using Highcharts drilldown about vue-highcharts HOT 5 CLOSED

try this:

import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import Highcharts from 'highcharts'
import loadDrillDown from 'highcharts/modules/drilldown'
loadDrillDown(Highcharts)
Vue.use(VueHighcharts, { Highcharts })

from vue-highcharts.

@km4
For those files are not modules, for example in antarctica data file, Highcharts.maps["custom/antarctica"] = {/* data */}, you will not get a value by import it.

Following codes might work:

import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts/highstock';
import loadMap from 'highcharts/modules/map';

loadMap(Highcharts);

// import this file directly after loadMap()
import './custom/antarctica.js';

Vue.use(VueHighcharts, { Highcharts });

Or you can edit ./custom/antarctica.js to make it be a module.

from vue-highcharts.

Still dont working with my project,

If I use normal <script src="https://code.highcharts.com/modules/drilldown.js"></script> in template and set timeout it working correct
example:
index.html > <script src="https://code.highcharts.com/modules/drilldown.js"></script>
index.js >

setTimeout(()=>{
 new Vue({
  el: '#id',
  render: h => h(App),
  store: store,
});
}, 1500)

working fine.

How I can use this, the same example on highcharts demo

import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import Highcharts from 'highcharts'
import loadDrillDown from 'highcharts/modules/drilldown'
loadDrillDown(Highcharts)
Vue.use(VueHighcharts, { Highcharts })

Dont work, the same with maps. I load map

<highmaps :options="options"></highmaps>
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts/highstock';
import loadMap from 'highcharts/modules/map';

loadMap(Highcharts);

Vue.use(VueHighcharts, { Highcharts });

and my $vm.Highcharts.maps is empty

from vue-highcharts.

@km4 It should works, see https://codesandbox.io/s/kxvqxzymm3

from vue-highcharts.

@weizhenye yes drill works fine.
Whats about map ? Why this loadMap don't work ?

Now I download map from https://code.highcharts.com/mapdata/.
Import in vue like import map from 'custom-world.js'; and add on series [{mapData: customWorld, }]

from vue-highcharts.