I'm currently working on a Vue project where I need to display data on a world map. However, I'm facing an issue with changing the color on the map. I want to utilize the minColor and maxColor options in the colorAxis configuration, but for some reason, it's not reflecting the desired changes.
This is my code snippet:
<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,
},
// rest of the configuration remains unchanged
},
};
},
};
</script>
<style scoped>
.map {
min-height: 500px;
}
</style>
You can find my sandbox link here: https://codesandbox.io/p/sandbox/highcharts-vue-demo-forked-vxrg57?file=%2Fsrc%2Fcomponents%2FMapChart.vue%3A1%2C1-1016%2C1
I would appreciate any guidance or suggestions on how to achieve color variation on the map as well as changing the color theme.