Map Chart

Drop-in components for displaying dynamic data on world, continent, and country maps — no D3, no topojson, no geo knowledge required. Available for both Vue 3 and React.

Pick one of the four packages below and head to its README for the full API. They all share the same props, the same ~264 built-in maps, and the same behavior — only the framework glue differs.

Package	Framework	Maps	Bundle
vue3-map-chart	Vue 3	Bundled locally	Larger, offline-capable
vue3-map-chart-lite	Vue 3	Fetched from a CDN at runtime	Lightweight
@arkn/react-map-chart	React	Bundled locally	Larger, offline-capable
@arkn/react-map-chart-lite	React	Fetched from a CDN at runtime	Lightweight

Not sure which one you need? Full if you want every map available offline with the fastest possible render; lite if you only use a handful of maps and want the smallest bundle — both cache what they fetch, so the difference is mostly about the first load.

Quick start

Vue

pnpm add vue3-map-chart # or vue3-map-chart-lite

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

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

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

React

pnpm add @arkn/react-map-chart # or @arkn/react-map-chart-lite

import { MapChart, WorldMap } from '@arkn/react-map-chart'
import '@arkn/react-map-chart/dist/style.css'

const data = { DE: 95, FR: 47, GB: 10 }

function App() {
  return (
    <MapChart data={data}>
      <WorldMap />
    </MapChart>
  )
}

Full prop/event reference, custom SVG maps, and more examples are in each package's own README (linked in the table above).

Demo

• Vue: live demo — source
• React: source (run pnpm dev-react locally)

Repository layout

This is a pnpm monorepo. The four public packages above sit on top of a shared, private, unpublished packages/core — the ~264 SVG maps, coloring/sanitization logic, tooltip and label positioning math, and the lite packages' fetch+cache pipeline all live there once; each framework package is a thin wrapper around it.

packages/
  core/                   private, framework-agnostic (not published)
  vue3-map-chart/         Vue, full
  vue3-map-chart-lite/    Vue, lite
  react-map-chart/        React, full
  react-map-chart-lite/   React, lite
  playground/             Vue demo app
  playground-react/       React demo app
  docs/                   VitePress docs site

Contributing

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

pnpm install
pnpm test    # all packages
pnpm lint
pnpm build   # all packages + both playgrounds + docs

Credits

This package uses SVG maps from amCharts

Changelog

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

License