Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
31
rated 0 times [  36] [ 5]  / answers: 1 / hits: 6210  / 9 Years ago, sat, february 14, 2015, 12:00:00

So, I've bene looking at the highcharts API, for an option to change the color of the point background color, when hovering the chart.



This is my current chart: JSFiddle Example



And the code:



$(function () {
$('#main-chart').highcharts({
chart: {
type: 'area'
},
plotBorderColor: '#000000',
plotBackgroundColor: '#000000',
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Number of Clicks'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]


}, {
name: 'USSR/Russia',
lineColor: '#44d99f',
color: '#f1faf7',
data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
}]
});
});


When hovering the chart, the point marker is a round gray circle - I want to change that to be a round circle with a white background and green border.



Is this possible?


More From » jquery

 Answers
15

You can add this to your plotOptions if you want the style of the points to be the same for every series.



              marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
}


A working fiddle can be found here:
http://jsfiddle.net/gwdufurk/3/



If you want to have the styles of the points to be different for each series you can set the marker.states.hover attributes for each series like so:



 series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
// other series here.

}


See fiddle here http://jsfiddle.net/gwdufurk/4/.


[#39256] Friday, February 13, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
saulthomasb

Total Points: 326
Total Questions: 98
Total Answers: 93

Location: Jordan
Member since Sun, Dec 26, 2021
2 Years ago
;