Vue 3 Map Chart

A Vue JS Component for displaying dynamic data on a world and continents maps.

Installation

If you are using npm:

npm i vue3-map-chart

If you are using yarn:

yarn add vue3-map-chart

If you are using pnpm:

pnpm add vue3-map-chart

Demo

View the live demo here

Usage

You can add this package globally to your project:

// main.js
import { createApp } from 'vue'

import App from './App.vue'

import Vue3MapChart from 'vue3-map-chart'
import 'vue3-map-chart/dist/style.css'

createApp(App).use(Vue3MapChart).mount('#app')

If needed rename component to use:

createApp(App).use(Vue3MapChart, { name: 'MyMapChart' }).mount('#app') // use in template <MyMapChart />

Alternatively you can also import the component locally:

<script setup>
 import { MapChart } from 'vue3-map-chart'
 import 'vue3-map-chart/dist/style.css'
</script>

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 data to be passed to it, which is a JS object formatted like so.

<script setup>
 import { MapChart } from 'vue3-map-chart'

 const data = {
    DE: 95,
    FR: 47,
    GB: 10,
 }
</script>

Or if for some reasons you want to customize each country color.

<script setup>
 import { MapChart } from 'vue3-map-chart'

 const data = {
    AU: {
      color: 'blue',
      value: 58,
    },
    NZ: {
      color: '#339601',
      value: 42,
    },
    ID: {
      color: '#F7931E',
      value: 62,
    },
 }
</script>

The key is a country's ISO 3166 Code. You can then use the component in your template

<template>
 <MapChart :data="data" />
</template>

Props

Name	Type	Description	Default	Required
data	number / { value?: number, color?: string, legendLabel?: string }	See Usage Section above for details	undefined	Yes
type	'world' / 'africa' / 'asia' / 'europe' / 'north-america' / 'south-america' / 'oceania'	Type of map displayed	'world'	No
baseColor	string	Color use for data representation	'#0782c5'	No
langCode	string	The language of countries name	'en'	No
width	number / string	Width of map	'100%'	No
height	number / string	Height of map	500	No
mapStyles	CSSProperties	Styles applied to map	{}	No
displayLegend	boolean	Display legend when mouse passes hover area on map	true	No
displayLegendWhenEmpty	boolean	Do not display legend when area value is empty	true	No
legendBgColor	string	Color of legend tooltip box	'rgba(0, 0, 0, 0.5)'	No
legendTextColor	string	Color of legend text	'#d8d8d8'	No
legendValuePrefix	string	Prefix added to value displayed on legend	''	No
legendValueSuffix	string	Suffix added to value displayed on legend	''	No
defaultStrokeColor	string	Default map stroke color	'rgb(200, 200, 200)'	No
defaultStrokeHoverColor	string	Default map stroke hover color	'rgb(200, 200, 200)'	No
defaultFillColor	string	Default map fill color	'rgb(236, 236, 236)'	No
defaultFillHoverColor	string	Default map fill hover color	'rgb(226, 226, 226)'	No
formatValueWithSiPrefix	boolean	Formats a number with a magnitude suffix	false	No
forceCursorPointer	boolean	Force the cursor to be in pointer mode even when the legend display is disabled	false	No

Events

• mapItemClick

  • This event is fired when an map area is clicked.

• mapItemMouseover

  • This event is fired when the mouse passes over the top of an map area.

<script setup>
 import { MapChart } from 'vue3-map-chart'

 const data = {
    US: 43,
    CA: 63,
    GB: 20,
 }

  const onMapItemClick = (areaId, areaValue) => {
    //
  }

  const onMapItemMouseover = (areaId, areaValue) => {
    //
  }
</script>

<template>
 <MapChart
    :data="data"
    @map-item-click="onMapItemClick"
    @map-item-mouseover="onMapItemMouseover"/>
</template>

Credits

This package use SVG maps from amCharts

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT