Appearance
Charts > World map
A world map that visually represents geographical data by mapping it onto a geographic layout, using colors to indicate different values or categories.
The Chart
: No data
Download example CSV
Copy HTML
Playground
Map options
How the curved two-dimensional surface of the globe is represent on a plane.
Style
Min and max color for color scale
Color for borders
Component API
The map is built with d3 and SVG using a TopoJSON file. Store the TopoJSON file in src/assets/maps, or change the import statements in the component file.
Usage Example (with tooltip)
vue
<template>
<WorldMap :key="key" :highlighted="highlighted" @hover="setTooltip" />
<OTTooltip :info="tooltip" :follow-mouse="true">
{{ tooltip?.data?.id }}:
{{ tooltip?.data?.value ? tooltip?.data?.value : "No data" }}
</OTTooltip>
</template>
<script setup>
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
</script>Data
js
{
ESP: 40,
PRT: 35,
FRA: 55,
...
}Props
| Name | Default | Description | Type |
|---|---|---|---|
data | {} | The dataset | Object |
color | { min: '#eff3ff', max: '#084594' } | The colors for linear color scale or custom color function | Object | Function |
strokeColor | white | The color of the borders | String |
highlightColor | black | The stroke color for the highlighted region | String |
noDataColor | #eee | The color for regions without data | String |
strokeColorNoData | #fff | The stroke color for regions without data | String |
duration | 500 | The time of the color changing animation in ms | Number |
highlighted | null | The id of the highlighted region | String | Number |
adjustSize | false | Whether or not the map should adapt to a set height/width | Boolean |
removeFeatures | ['010'] | The ids of features not to show | Array |
removeFeaturesForBounds | ['FJI','USA','TON',...] | The ids of features to ignore when calculating map bounds | Array |
accessor | (d) => d.properties.ISO_A3 | The function to access the id of a feature | Function |
fitBoundsToData | false | Whether or not to limit boundaries of map to regions with data | Boolean |
maxZoom | 16 | The maximum zoom level | Number |
useBgPattern | false | Whether or not to use a pattern for regions without data | Boolean |
Events
| Name | Argument | Description |
|---|---|---|
@select | { target, data } | Emitted when region is clicked |
@hover | { target, data } | null | Emitted when region is hovered |
@zoom | { k, x, y } | Emitted when map is zoomed |
Dependencies
- d3
- topojson-client
- countries.json