Vue2 Map Chart

An open-source Vue.js component for rendering interactive world map heat maps. Pass country data as ISO 3166 codes, customize high/low colors, stroke colors, and default fills. Supports legend slots for country details. Published on npm (vue2-map-chart) with 24 releases and 15+ weekly downloads. Built on top of amCharts SVG maps with chroma-js for color interpolation.

From the repo

How it works

Vue 2 component that colors countries on a world map from ISO codes (heatmap style), with gradients you control and optional legend slots.

Read the full readme on GitHub

Credits

Install

npm install vue2-map-chart

Usage

Give `countryData` as an object keyed by ISO 3166 country codes. Values can be simple numbers or objects with count and text for the legend.

import MapChart from 'vue2-map-chart'

// Example: numeric shorthand
<MapChart
  :country-data="{ US: 4, CA: 7, GB: 8, IE: 14, ES: 21 }"
  high-color="#ff0000"
  low-color="#aaaaaa"
  country-stroke-color="#909090"
  default-country-fill-color="#dadada"
/>

// Object values (per README)
const countryData = {
  US: { count: 100, percentage: '25%' },
  CA: { count: 240, percentage: '40%' },
  GB: { count: 180, percentage: '35%' },
}

Slots

legend_header

When a country is selected, the country name shows in this header slot.

legend_content

Where code, count, and percentage show in the legend body.

Props

countryData

ISO-keyed map of values (numbers or { count, percentage }).

required

lowColor

Color for lower values in the heat scale.

optional

highColor

Color for higher values in the heat scale.

optional

defaultCountryFillColor

Fill for countries with no data.

optional

countryStrokeColor

Border color around country shapes.

optional

legendBorderColor

Legend border (work in progress).

WIP

legendHeaderBackgroundColor

Legend header background.

WIP

legendContentBackgroundColor

Legend content background.

WIP

showLegend

If true, show an on-screen legend when a country is selected.

WIP

Roadmap

More map types (world, Europe, single country)
Click events on countries
Extra styling options
Export to PDF or CSV