vue-highcharts demo - Use Highmaps

index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@6/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
<!-- vue-highcharts should be load after Highmaps -->
<script src="https://cdn.jsdelivr.net/npm/vue-highcharts/dist/vue-highcharts.min.js"></script>

<div id="app">
  <highmaps :options="options"></highmaps>
</div>

script.js

var options = {
  chart: {
    borderWidth: 1
  },
  title: {
    text: 'Nordic countries'
  },
  subtitle: {
    text: 'Demo of drawing all areas in the map, only highlighting partial data'
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Country',
    mapData: Highcharts.maps['custom/europe'],
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ],
    dataLabels: {
      enabled: true,
      color: '#FFFFFF',
      formatter: function () {
        if (this.point.value) {
          return this.point.name;
        }
      }
    },
    tooltip: {
      headerFormat: '',
      pointFormat: '{point.name}'
    }
  }]
};

var vm = new Vue({
  el: '#app',
  data: {
    options: options
  }
});

vue-highcharts-demo-use-highmaps.markdown

vue-highcharts demo - Use Highmaps

A Pen by Zhenye Wei on CodePen.

License.