vue3-map-chart v0.0.5

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

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