I have a vue project where I am trying to display data on a world map but I am unable to change the color on the map. I want the map to use the minColor and maxColor in the colorAxis option but it is not changing.
My code:
<template>
<highcharts
:constructor-type="'mapChart'"
:options="mapOptions"
class="map"
></highcharts>
</template>
<script>
export default {
data() {
return {
mapOptions: {
chart: {
map: "myMapName",
},
title: {
text: "World Map",
},
accessibility: {
enabled: false,
},
credits: {
enabled: false,
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom",
},
},
colorAxis: {
min: 3,
minColor: "#efecf3",
maxColor: "#990041",
max: 17246092,
},
tooltip: {},
series: [
{
data: [
{
country: "Albania",
visits: 53441,
},
{
country: "Algeria",
visits: 9304,
},
{
country: "Argentina",
visits: 77321,
},
{
country: "Armenia",
visits: 41661,
},
{
country: "Australia",
visits: 1363119,
},
{
country: "Austria",
visits: 353288,
},
{
country: "Azerbaijan",
visits: 48111,
},
{
country: "Belarus",
visits: 17638,
},
{
country: "Belgium",
visits: 224227,
},
{
country: "Bosnia and Herzegovina",
visits: 30180,
},
{
country: "Brazil",
visits: 258577,
},
{
country: "Bulgaria",
visits: 151502,
},
{
country: "Canada",
visits: 1183894,
},
{
country: "China",
visits: 105676,
},
{
country: "Colombia",
visits: 178806,
},
{
country: "Croatia",
visits: 45416,
},
{
country: "Cyprus",
visits: 5498,
},
{
country: "Czech Republic",
visits: 909352,
},
{
country: "Denmark",
visits: 174967,
},
{
country: "Dominican Republic",
visits: 18860,
},
{
country: "Egypt",
visits: 46024,
},
{
country: "Estonia",
visits: 41401,
},
{
country: "Faroe Islands",
visits: 92,
},
{
country: "Finland",
visits: 82992,
},
{
country: "France",
visits: 1491268,
},
{
country: "Georgia",
visits: 156395,
},
{
country: "Germany",
visits: 2553098,
},
{
country: "Greece",
visits: 46171,
},
{
country: "Guatemala",
visits: 56040,
},
{
country: "Hong Kong SAR of China",
visits: 711130,
},
{
country: "Hungary",
visits: 71749,
},
{
country: "Iceland",
visits: 2114,
},
{
country: "India",
visits: 2868572,
},
{
country: "Ireland",
visits: 207269,
},
{
country: "Israel",
visits: 61145,
},
{
country: "Italy",
visits: 823319,
},
{
country: "Japan",
visits: 4810408,
},
{
country: "Kazakhstan",
visits: 119304,
},
{
country: "Latvia",
visits: 25391,
},
{
country: "Libyan Arab Jamahiriya",
visits: 5555,
},
{
country: "Lithuania",
visits: 21681,
},
{
country: "Luxembourg",
visits: 8703,
},
{
country: "Macedonia",
visits: 405473,
},
{
country: "Malaysia",
visits: 117930,
},
{
country: "Maldives",
visits: 1266,
},
{
country: "Moldova",
visits: 24425,
},
{
country: "Monaco",
visits: 243,
},
{
country: "Montenegro",
visits: 17042,
},
{
country: "Netherlands",
visits: 2479834,
},
{
country: "New Zealand",
visits: 50603,
},
{
country: "Nigeria",
visits: 1698638,
},
{
country: "Norway",
visits: 227112,
},
{
country: "Oman",
visits: 9053,
},
{
country: "Pakistan",
visits: 347628,
},
{
country: "Philippines",
visits: 132262,
},
{
country: "Poland",
visits: 413068,
},
{
country: "Portugal",
visits: 102477,
},
{
country: "Qatar",
visits: 14202,
},
{
country: "Romania",
visits: 317966,
},
{
country: "Russian Federation",
visits: 41468,
},
{
country: "San Marino",
visits: 37,
},
{
country: "Saudi Arabia",
visits: 95093,
},
{
country: "Serbia",
visits: 334413,
},
{
country: "Singapore",
visits: 7602997,
},
{
country: "Slovakia (Slovak Republic)",
visits: 52697,
},
{
country: "Slovenia",
visits: 8482,
},
{
country: "South Africa",
visits: 784150,
},
{
country: "South Korea",
visits: 312954,
},
{
country: "Spain",
visits: 904582,
},
{
country: "Sri Lanka",
visits: 8116,
},
{
country: "Sweden",
visits: 1048527,
},
{
country: "Switzerland",
visits: 1296541,
},
{
country: "Taiwan region",
visits: 247804,
},
{
country: "Thailand",
visits: 416014,
},
{
country: "Turkey",
visits: 178539,
},
{
country: "Ukraine",
visits: 774568,
},
{
country: "United Arab Emirates",
visits: 104290,
},
{
country: "United Kingdom",
visits: 2519207,
},
{
country: "United States",
visits: 17246092,
},
{
country: "Uruguay",
visits: 7354,
},
{
country: "Bangladesh",
visits: 67672,
},
{
country: "Bolivia",
visits: 21636,
},
{
country: "Cambodia",
visits: 1132839,
},
{
country: "Chile",
visits: 30753,
},
{
country: "Ethiopia",
visits: 337233,
},
{
country: "Malta",
visits: 4881,
},
{
country: "Mexico",
visits: 188870,
},
{
country: "Puerto Rico",
visits: 11073,
},
{
country: "Somalia",
visits: 101789,
},
{
country: "South Sudan",
visits: 5583,
},
{
country: "Venezuela",
visits: 431902,
},
{
country: "Viet Nam",
visits: 731114,
},
{
country: "Angola",
visits: 75691,
},
{
country: "Antigua and Barbuda",
visits: 309,
},
{
country: "Costa Rica",
visits: 27307,
},
{
country: "Ecuador",
visits: 72013,
},
{
country: "El Salvador",
visits: 35544,
},
{
country: "Iraq",
visits: 114778,
},
{
country: "Kuwait",
visits: 9479,
},
{
country: "Kyrgyzstan",
visits: 19661,
},
{
country: "Lebanon",
visits: 4668,
},
{
country: "Morocco",
visits: 13166,
},
{
country: "Panama",
visits: 25031,
},
{
country: "Zambia",
visits: 12664,
},
{
country: "Andorra",
visits: 306,
},
{
country: "Chad",
visits: 4705,
},
{
country: "Cuba",
visits: 16800,
},
{
country: "Ghana",
visits: 30881,
},
{
country: "Indonesia",
visits: 1902195,
},
{
country: "Jordan",
visits: 5312,
},
{
country: "Kenya",
visits: 112430,
},
{
country: "Macau SAR of China",
visits: 15691,
},
{
country: "Mongolia",
visits: 4563,
},
{
country: "Nepal",
visits: 10716,
},
{
country: "Peru",
visits: 63266,
},
{
country: "Rwanda",
visits: 54039,
},
{
country: "Tunisia",
visits: 4190,
},
{
country: "Uzbekistan",
visits: 68575,
},
{
country: "Saint Kitts and Nevis",
visits: 133,
},
{
country: "Tajikistan",
visits: 11662,
},
{
country: "Democratic Republic of The Congo",
visits: 25806,
},
{
country: "Barbados",
visits: 685,
},
{
country: "Cape Verde",
visits: 5754,
},
{
country: "Iran (Islamic Republic of)",
visits: 43079,
},
{
country: "Equatorial Guinea",
visits: 615,
},
{
country: "Liechtenstein",
visits: 135,
},
{
country: "Bonaire/Sint Eustatius/Saba",
visits: 100,
},
{
country: "Burundi",
visits: 18386,
},
{
country: "Aland Islands",
visits: 48,
},
{
country: "Syrian Arab Republic",
visits: 3407,
},
{
country: "Belize",
visits: 645,
},
{
country: "Guadeloupe",
visits: 252,
},
{
country: "Guinea-Bissau",
visits: 4325,
},
{
country: "Holy See (Vatican City State)",
visits: 95,
},
{
country: "Honduras",
visits: 18958,
},
{
country: "British Virgin Islands",
visits: 947,
},
{
country: "Cote D Ivoire",
visits: 18164,
},
{
country: "Lao Peoples Democratic Republic",
visits: 22122,
},
{
country: "Mauritius",
visits: 2613,
},
{
country: "Seychelles",
visits: 4175,
},
{
country: "Bahrain",
visits: 4429,
},
{
country: "Mozambique",
visits: 92447,
},
{
country: "Uganda",
visits: 20423,
},
{
country: "Gibraltar",
visits: 154,
},
{
country: "Aruba",
visits: 589,
},
{
country: "Palestinian Territories",
visits: 1117,
},
{
country: "Afghanistan",
visits: 109527,
},
{
country: "Bermuda",
visits: 182,
},
{
country: "Northern Mariana Islands",
visits: 114,
},
{
country: "Tanzania",
visits: 72457,
},
{
country: "Namibia",
visits: 10649,
},
{
country: "Yemen",
visits: 3683,
},
{
country: "Cayman Islands",
visits: 197,
},
{
country: "Guyana",
visits: 1003,
},
{
country: "Turks and Caicos Islands",
visits: 219,
},
{
country: "Reunion",
visits: 601,
},
{
country: "US Virgin Islands",
visits: 306,
},
{
country: "Senegal",
visits: 11315,
},
{
country: "Isle of Man",
visits: 357,
},
{
country: "Bahamas",
visits: 868,
},
{
country: "Greenland",
visits: 58,
},
{
country: "Brunei Darussalam",
visits: 1384,
},
{
country: "Central African Republic",
visits: 1274,
},
{
country: "Madagascar",
visits: 1709,
},
{
country: "Mali",
visits: 12544,
},
{
country: "Lesotho",
visits: 1023,
},
{
country: "Myanmar",
visits: 1417086,
},
{
country: "Benin",
visits: 7373,
},
{
country: "Fiji",
visits: 1886,
},
{
country: "Saint Lucia",
visits: 309,
},
{
country: "Cameroon",
visits: 17148,
},
{
country: "Malawi",
visits: 9080,
},
{
country: "Sierra Leone",
visits: 2090,
},
{
country: "Comoros",
visits: 208,
},
{
country: "Jamaica",
visits: 2691,
},
{
country: "Papua New Guinea",
visits: 2399,
},
{
country: "Unspecified",
visits: 1551,
},
{
country: "Gambia",
visits: 1319,
},
{
country: "Swaziland",
visits: 1297,
},
{
country: "Zimbabwe",
visits: 94964,
},
{
country: "Niger",
visits: 12674,
},
{
country: "Paraguay",
visits: 9457,
},
{
country: "Congo",
visits: 5117,
},
{
country: "Djibouti",
visits: 3779,
},
{
country: "Guinea",
visits: 4043,
},
{
country: "Liberia",
visits: 2214,
},
{
country: "Mauritania",
visits: 2108,
},
{
country: "Turkmenistan",
visits: 11514,
},
{
country: "Botswana",
visits: 11685,
},
{
country: "Sudan",
visits: 1635,
},
{
country: "Grenada",
visits: 229,
},
{
country: "Sao Tome and Principe",
visits: 1445,
},
{
country: "Trinidad and Tobago",
visits: 1985,
},
{
country: "Gabon",
visits: 3015,
},
{
country: "Nicaragua",
visits: 114630,
},
{
country: "French Polynesia",
visits: 193,
},
{
country: "New Caledonia",
visits: 359,
},
{
country: "Suriname",
visits: 523,
},
{
country: "Vanuatu",
visits: 374,
},
{
country: "Haiti",
visits: 20726,
},
{
country: "French Guiana",
visits: 212,
},
{
country: "Timor-Leste",
visits: 832,
},
{
country: "Mayotte",
visits: 235,
},
{
country: "Bhutan",
visits: 2311,
},
{
country: "Togo",
visits: 4470,
},
{
country: "Guam",
visits: 1497,
},
{
country: "Eritrea",
visits: 3033,
},
{
country: "Solomon Islands",
visits: 429,
},
{
country: "Samoa",
visits: 92,
},
{
country: "Dominica",
visits: 193,
},
{
country: "Jersey",
visits: 309,
},
{
country: "Guernsey",
visits: 218,
},
{
country: "Falkland Islands (Malvinas)",
visits: 7,
},
{
country: "Europe (Unknown Country)",
visits: 209,
},
{
country: "Martinique",
visits: 428,
},
{
country: "Saint Vincent and The Grenadines",
visits: 188,
},
{
country: "Burkina Faso",
visits: 9094,
},
{
country: "Palau",
visits: 142,
},
{
country: "Sint Maarten",
visits: 132,
},
{
country: "Marshall Islands",
visits: 83,
},
{
country: "Kiribati",
visits: 66,
},
{
country: "Tonga",
visits: 120,
},
{
country: "Curacao",
visits: 474,
},
{
country: "Antarctica",
visits: 165,
},
{
country: "Anguilla",
visits: 220,
},
{
country: "Federated States of Micronesia",
visits: 117,
},
{
country: "American Samoa",
visits: 92,
},
{
country: "British Indian Ocean Territory",
visits: 3,
},
{
country: "Cook Islands",
visits: 26,
},
{
country: "Norfolk Island",
visits: 7,
},
{
country: "Tuvalu",
visits: 6,
},
{
country: "Niue",
visits: 6,
},
{
country: "Christmas Island",
visits: 8,
},
{
country: "Saint Martin",
visits: 43,
},
{
country: "Nauru",
visits: 16,
},
{
country: "Montserrat",
visits: 6,
},
{
country: "Saint Barthelemy",
visits: 16,
},
{
country: "St. Pierre and Miquelon",
visits: 3,
},
{
country: "North Korea",
visits: 90,
},
],
joinBy: ["name", "country"],
name: "Visits",
dataLabels: {
enabled: false,
},
},
],
},
};
},
};
</script>
<style scoped>
.map {
min-height: 500px;
}
</style>
Link to my sandbox: https://codesandbox.io/p/sandbox/highcharts-vue-demo-forked-vxrg57?file=%2Fsrc%2Fcomponents%2FMapChart.vue%3A1%2C1-1016%2C1
Please advise on how to get variation of color on map and also change the color of the map.
To connect the visits data to color-axis, use the colorKey property.
tooltip: {
pointFormat: '{point.name}: {point.visits}<br/>'
},
series: [{
colorKey: 'visits',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/z7pknfLg/
API Reference: https://api.highcharts.com/highmaps/series.map.colorKey