FillColor series for marker on hover only
I have "faked" a crisp circle as markers by setting fillColor to be the same as the background. It works great. Now, on hover, I am trying to get the circle to fill with the color of the series. I cannot set it to NULL since then it takes on the background color.
Any ideas?
Here is my diagram code (live version here: http://jsbin.com/ukabob/2/edit ):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC'
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
fillColor: '#E9E7DC',
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: null,
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});
source to share
I'm not sure how it should look like, but I see two ways:
-
you need white space between lines, and when hovering, fill that space, in which case you can use this solution: http://jsbin.com/ukabob/3/edit As you can see, for each series, you have to set marker options:
series: [{ data: [], marker: { states: { hover: { fillColor: yourColor } } } }]
-
you don't need white space between lines, in which case you can set marker radius to 0, see http://jsbin.com/ukabob/5/edit
plotOptions: { series: { marker: { radius: 0, lineColor: null, // inherit from series symbol: 'circle', states: { hover: { fillColor: null, fillColor: null, lineWidth: 2, radius: 6 } } } } }
source to share
If you define fillColor: "white" on a marker, on hover or select state, you cannot get the default / original color from the series.
I found a way to solve your problem. If you define a high value in lineWidth (> = radius), this will fill the entire point.
series: [{
data: [],
marker: {
states: {
hover: {
fillColor: null,
radius: 6,
lineWidth: 6
}
}
}
}]
Here's an example: http://jsbin.com/majigera/1
Late answer. Hope this helps someone.
source to share