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