jeudi 19 février 2015

Highcharts fill bubble on hover


I'm making a combination chart using Highcharts.js.


It consists of a line and two series of bubbles - one to indicate positive changes, and one to indicate negative.


My code looks like:



$('#container').highcharts({
exporting: {
enabled: false
},
title: false,
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: false,
labels: {
enabled: false,
},
gridLineWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer'
},
bubble: {
minSize: 50,
maxSize: 80
}
},
series: [{
name: 'Line',
data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}],
showInLegend: false,
marker: {radius: 18},
states: {
hover: {
enabled: false,
}
}
}, {
name: 'Positive',
dataLabels: {
enabled: true,
x:0,
formatter:function() {
return this.point.z;
},
style:{color:"black",fontSize:"16px",textShadow:"0px"}
},
type: 'bubble',
color: '#0BBF23',
data: [{"x":2,"y":9.5,"z":2.6},{"x":3,"y":14.5,"z":5},{"x":4,"y":18.2,"z":3.7},{"x":5,"y":21.5,"z":3.3},{"x":6,"y":25.2,"z":3.7},{"x":7,"y":26.5,"z":1.3}],
}, {
name: 'Negative',
type: 'bubble',
color: '#BF0B23',
data: [[1,6.9,0.1],[8,23.3,3.2],[9,18.3,5],[10,13.9,4.4],[11,9.6,4.3]],
dataLabels: {
enabled: true,
x:0,
formatter:function() {
return this.point.z;
},
style:{color:"black",fontSize:"16px",textShadow:"0px"}
},
states: {
hover: {
halo: {
size: 1,
attributes: {
zIndex: 9000
},
opacity: 1
}
}
},
}, {
type: 'column',
pointWidth: 1,
borderWidth: 0,
showInLegend: false,
data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}] }]
});


As you can see I'm using the "halo" to try to fill in the bubble on the negative series when it's hovered. Ideally I'd like to increase the bubble size and font as well, but I have no clue how to make it happen.


Does anyone have any idea how to make the marker fill with solid colour, increase radius and increase font size on hover?


Fiddle Here: http://ift.tt/1EaYTCi


It's worth noting that on my local version the line plot shows through the halo, but it doesn't on the fiddle.





Aucun commentaire:

Enregistrer un commentaire