How to use vue-highcharts with highcharts-pattern-fill?

[rafael-trevisan]

Hi @weizhenye, thanks for the amazing work you've done.

I'm starting to learn Vue and I'm having a hard time to figure out how to use highcharts-pattern-fill (v2) with vue-highcharts.

In a common single page I just need to drop a <script scr=".../highchart-pattern-fill-v2.js"> in the head, but in Vue if I do the same I get an error saying Highcharts is undefined which is probably because I'm trying to run this file before loading Highcharts.

So, could you please provide any direction or example to how achieving vue-highcharts with highchart-pattern-fill?

Thanks a lot.

[rafael-trevisan]

I was looking some old issues and I got a similar example that worked after little changes:

import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import Highcharts from 'highcharts'
import PatternFill from 'highcharts-pattern-fill'
import App from './App'

PatternFill(Highcharts);

Vue.use(VueHighcharts, { Highcharts })

Thanks folks!

[PhouvanhKCSV]

Still does not work, could you please provide an example via jsfiddle?

[weizhenye]

@PhouvanhKCSV https://jsfiddle.net/h85mx0bt/1/

[PhouvanhKCSV]

@weizhenye Thank you.