# vue-chart-engine
chart components built with Vue.js.

This repository contains a set of native Vue.js components based on chart engine(AnyChart,HighChart,EChart etc). As a result no dependency on jQuery is required. The only required dependencies are:

* [Vue.js](http://vuejs.org/).

## Installation

### NPM

```bash
$ npm install vue-chart-engine
```

### CommonJS
```js
var engine = require('vue-chart-engine').engine;

new Vue({
  components: {
    'engine': engine
  }
})
```

### ES6
```js
import engine from 'vue-chart-engine/src/Home'
// or
import { engine } from 'vue-chart-engine'

new Vue({
  components: {
    engine
  }
})
```

### AMD
```js

define(['vue-chart-engine'], function(VueStrap) { var engine = VueChartEngine.engine; ... });
```

### Browser globals
The `dist` folder contains `vue-chart-engine.js` and `vue-chart-engine.min.js` with all components exported in the <code>window.VueChartEngine</code> object. These bundles are also available in,
and on both the Bower and NPM packages.

```html
<div id="container" style="height:300px;width:50%"></div>
<engine :branch="currentBranch" :genre="currentGenre" :data-init="msg"  :container="container"></engine>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-chart-engine.js"></script>
<script>
      var vm = new Vue({
          components: {
              engine: VueChartEngine.engine
          },
          el: "body",
          data: {
             currentBranch: 'HighChart',
             currentGenre: "area_basic",
             msg0:[
              ["January", 10000],
              ["February", 12000],
              ["March", 18000],
              ["April", 11000],
              ["May", 9000]
            ],
              msg:[ 
              ["January", 10000,8999],
              ["February", 12000,10000],
              ["March", 18000,5555],
              ["April", 11000,6666],
              ["May", 9000,7777]
            ],
            container:"container"
          }
      })
</script>
```

## Local Setup
* Install with `npm install`
* Run the docs site in development mode with `npm run docs`. This will watch for file changes as you work.
* Build with `npm run build`.


## License
vue-chart-engine is licensed under [The MIT License](LICENSE).