w-highcharts-vue

A vue component for highcharts and highstock.

Highcharts and vue-highcharts are bundled in this package, no need to load them from cdn.

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all components: web [source code]

Installation

Using npm(ES6 module):

npm i w-highcharts-vue

Import all components:

//choose component
<w-highcharts-vue
    ...
></w-highcharts-vue>

//import
import WHighchartsVue from 'w-highcharts-vue'

//use
Vue.use(WHighchartsVue)

Import one component:

//choose component
<w-highcharts-vue
    ...
></w-highcharts-vue>

//import
import WHighchartsVue from 'w-highcharts-vue/src/components/WHighchartsVue.vue'

//component
Vue.component('w-highcharts-vue',WHighchartsVue)
//or
export default {
    components: {
        WHighchartsVue,
        //or
        'w-highcharts-vue': WHighchartsVue,
    },
    ...
}

In a browser(UMD module):

Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Add script for w-highcharts-vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-highcharts-vue.umd.js"></script>

Directly use:

//app and component
<div id="app">
    <w-highcharts-vue
        ...
    ></w-highcharts-vue>
</div>

//use
Vue.use(window['w-highcharts-vue'])

//new
new Vue({
    el: '#app',
    data: {
        ...
    }
})

Components

| component | tag | description | | --- | --- | --- | | WHighchartsVue | w-highcharts-vue | Highcharts chart, use options for highcharts settings | | WHighstockVue | w-highstock-vue | Highstock chart, use options for highstock settings |

Use $refs for accessing the inner chart instance:

//template
<w-highcharts-vue
    ref="hc"
    :options="options"
></w-highcharts-vue>

//chart, an instance of Highcharts.Chart
let chart = this.$refs.hc.$refs.$self.chart