Vue2 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 vue2-map-chart
import MapChart from 'vue2-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": {
count:100,
percentage:'any string here'
},
"CA": {
count:240,
percentage:'any string here'
},
"GB": {
count:180,
percentage:'any string here'
},
}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"
/>Slots
| Slots | Description | Optional |
|---|---|---|
| legend_header | Header Slot of Legend | Country Name will shown here |
| legend_content | Content Slot for Legend | Country Code Count & Percentage shown here |
API
| Props | Description | Optional |
|---|---|---|
| countryData | See Usage Section above for details | no |
| lowColor | Countries with lower values will be colored more strongly with this color | yes |
| highColor | Countries with higher values will be colored more strongly with this color | yes |
| defaultCountryFillColor | Countries with no data will default to this color | yes |
| countryStrokeColor | The color of the border around countries | yes |
| legendBorderColor | (WIP) The color of the legend's border | WIP |
| legendHeaderBackgroundColor | (WIP) The background color of the legend's header | WIP |
| legendContentBackgroundColor | (WIP) The background color of the legend's content | WIP |
| showLegend | (WIP) If true, when you select a country a legend will appear on the screen | WIP |
Roadmap
- Change Map type (World, Europe, single country, etc...) (WIP)
- Click events
- More customization
- Export PDF/CSV