I have 5 days trying to change color zone, this's code:
[https://jsfiddle.net/gerarca/7sg1c4nz/187/][1]
I just want to change backgroung color on over event, like:
If I put the mouse pointer over a department, an area should be highlighted in red, the area to which the department belongs.
I tried to do it using multiple overs, but this property can only be used once and don't work.
where I'm wrong??
Add this to your css file:
.highcharts-series-group path:hover {
fill: rgba(249, 209, 12, 0.87); // or whatever color
}
Each department in your example refers to one point in the series. If you want to change the colour of the hovered point, you can use i.e point.events to achieve that:
point: {
events: {
mouseOver: function() {
originalColor = this.color;
this.update({
color: '#5F9EA0'
});
},
mouseOut: function() {
this.update({
color: originalColor
});
}
}
}
But if you want to change the colour of the zones and enable the dataLabels on hover, as like image shows, it would be best to create zones as a separate series. Then you will be able to easily update these series after mouseOver event.
Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
color: 'white',
format: '{point.name}'
},
color: 'grey',
allAreas: false,
states: {
hover: {
color: 'red'
}
},
events: {
mouseOver: function() {
this.update({
color: 'red',
dataLabels: {
enabled: true
}
}, false)
chart.update({}, true, false, false);
},
mouseOut: function() {
this.update({
color: 'grey',
dataLabels: {
enabled: false
}
}, false)
chart.update({}, true, false, false);
}
}
},
},
series: [{
data: zone1,
name: 'zone 1'
},
{
data: zone2,
name: 'zone 2'
},
{
data: zone3,
name: 'zone 3'
},
{
data: zone4,
name: 'zone 4'
},
{
data: zone5,
name: 'zone 5'
}
]
});
Demo:
https://jsfiddle.net/BlackLabel/296ujzf4/
API References:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Series#update