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??
CodePudding user response:
Add this to your css file:
.highcharts-series-group path:hover {
fill: rgba(249, 209, 12, 0.87); // or whatever color
}
CodePudding user response:
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