Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 2.63 KB

README.md

File metadata and controls

80 lines (59 loc) · 2.63 KB
Raw

Vue Map Chart

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

preview

Credits

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

Props Description Optional Type
countryData See Usage Section above for details no Object
lowColor Countries with lower values will be colored more strongly with this color yes String
highColor Countries with higher values will be colored more strongly with this color yes String
chromaScaleOn If True chromaScale of color, if false countries with value will be filled of the hightColor. By default is True yes Boolean
defaultCountryFillColor Countries with no data will default to this color yes String
countryStrokeColor The color of the border around countries yes String
legendBorderColor The color of the legend's border yes String
legendBorderRadius The radius of the legend's border yes Number
legendHeaderBackgroundColor The background color of the legend's header yes String
legendContentBackgroundColor The background color of the legend's content yes String
legendFontColorHeader The font color of the legend's header yes String
legendFontColorContent The font color of the legend's content yes String
legendBoxShadow If true, a box shadow is display yes Boolean
showLegend (WIP) If true, when you select a country a legend will appear on the screen WIP Boolean

Roadmap

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