vue-highcharts

> The component of Vue 2.0 for highcharts

中文 README

Check the Demo or
Demo On CodeSanbox

Installation

#### npm

>make sure you have installed highcharts.js.

``
npm install vue2-highcharts --save
`

Usage

Using ES6 Module in the component with load async data


`es6


`
you can get the chart instance by this.$refs.lineCharts

And using the methods of Highchart with delegateMethod()

If you want to use Highstock, Highmaps or any other add-ons, you should load add-ons as a module.

Load Drilldown module

`javascript
import Exporting from '../node_modules/highcharts/modules/Exporting.js'
import Drilldown from '../node_modules/highcharts/modules/Drilldown.js'
import Highcharts from 'highcharts'
// Load Drilldown module
Drilldown(Highcharts);
// Load Exporting module
Exporting(Highcharts);

`
you can ses Highcharts docs - Install from npm

Using with Nuxt.js


In Nuxt.js use vue2-highcharts, you should define a globle Component vue-highcharts.js for in ~/plugins:

`js
import Vue from 'vue'
import VueHighcharts from 'vue2-highcharts'

Vue.component('VueHighcharts', VueHighcharts)
`
and add it in nuxt.config.js:

`
plugins: [{ src: '~plugins/vue-highcharts.js', ssr: false }],
`
after that, you can use vue2-highcharts component in your nuxt.js project.

for more detail, you can see: vue-nuxt-demo for vue-highcharts

Props


|Name | Type | Description(Default Value) |
|-------------------- | ---------------- | -------------------|
|classname | string | classname for component(default: vue-highcharts)|
|style | object | component styles(default: {})|
|options | object(require) | options of highcharts|
|highcharts | object | Highcharts instance |

Build Setup

` bash


install dependencies

npm install

open "localhost:8080" in browers

npm run dev

build for production with minification

npm run build
``

For detailed explanation on how things work, consult the docs for vue-loader.

License

MIT

Copyright (c) 2017-present, superman66