## MV Chart

### Getting Started

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install --save highcharts highcharts-vue
```

### Usage

Install `highcharts` and `highcharts-vue` globally in the `main.js` file.

```js
import Vue from 'vue'
import App from './App.vue'
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import dataModule from 'highcharts/modules/data'
dataModule(Highcharts)

Vue.use(HighchartsVue)
new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

```

In your components:
```vue
<template>
  <MPieChart :data="data" :options="options" />
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: 'Chrome',
            y: 61.41
          },
          {
            name: 'Internet Explorer',
            y: 11.84
          },
          {
            name: 'Firefox',
            y: 10.85
          },
          {
            name: 'Edge',
            y: 4.67
          },
          {
            name: 'Safari',
            y: 4.18
          }
        ],
        options: {
          name: 'Laporan Penjualan',
          title: 'Title',
          subtitle: 'Subtitle'
        }
      }
    }
  }
</script>
```
Using csv data 
```vue
<template>
  <MPieChart :data="data" :options="options" />
</template>

<script>
  export default {
    data() {
      return {
        data: '"name";"value"\n"Chrome";61.41\n"Internet Explorer";11.84\n"Firefox";10.85',
        options: {
          name: 'Laporan Penjualan',
          title: 'Title',
          subtitle: 'Subtitle'
        }
      }
    }
  }
</script>
```
Or you can use the magic component `<DynamicWidget />`, Like on the [main page](./).