vue-map-chart-update-test v0.0.3

Vue Map Chart

A Vue JS Component for displaying dynamic data on a world map.

Credits

• Most of this code is copied from https://github.com/Ghrehh/vue-world-map
• Map SVG amCharts

Installation

Install via npm using npm install vue-map-chart

import MapChart from 'vue-map-chart'

Usage

This component is most useful in creating a heat map for various countries. And will color countries differently based on a props passed.

The component requires a prop of countryData to be passed to it, which is a JS object formatted like so.

{
  "US": 100,
  "CA": 120,
  "GB": 400,
}

Where the key is a country's ISO 3166 Code and the value is a numerical value associated with it.

Example:

import MapChart from 'vue-map-chart'

<MapChart
  :countryData="{'US': 4, 'CA': 7, 'GB': 8, 'IE': 14, 'ES': 21}"
  highColor="#ff0000"
  lowColor="#aaaaaa"
  countryStrokeColor="#909090"
  defaultCountryFillColor="#dadada"
  />

API

Roadmap

• Change Map type (World, Europe, single country, etc...) (WIP)
• Click events
• More customization
• Export PDF/CSV