[Vuejs]-How to use zingchart maps modules in Vue.js?

by

1👍

we have updated our readme in the zingchart-vue repo on how to address the problem.

https://github.com/zingchart/zingchart-vue#zingchart-modules

ZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.

For example, adding a depth chart to your vue component will require an additional import. Note, you must import from the modules-es6 directory in the zingchart package.

import 'zingchart/modules-es6/zingchart-depth.min.js';

Here is a full .vue example for loading a map:

<template>
  <div style="height:200px">
    <zingchart :height="'100%'" ref="myChart" 
               :data="{
        shapes: [
          {
            type: 'zingchart.maps',
            options: {
              name: 'usa',
              ignore: ['AK','HI']
            }
          }
        ]
      }" >
    </zingchart>
  </div>
</template>

<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';

export default {
  components: {
    zingchart: zingchartVue,
  },
}
</script>
👤mike-schultz

Leave a comment