ZingChart: Style Change on Mouseover
So I used guidemosemove API Event and triggered a chart update with modify. Inside that I'm applying rules to style the plots. We also have addrule in our api, but I would suggest the way I implemented it. I can change the lineWidth and the alpha for the shaded region in area charts.
Chart config
var myConfig = {
type: 'area',
title: {
text: 'Move cursor over chart'
},
plot: {
aspect: 'spline',
midPoint:false,
lineWidth: 2,
alpha:0,
alphaArea:.2,
tooltip:{visible:false}
},
crosshairX: {},
series: [
{
values: [35,42,67,89,25,34,67,85]
},
{
values: [135,142,167,189,125,134,167,185]
}
]
};
API Code
// bind event for crosshair updating
var previousPosition = null;
zingchart.bind(null, 'guide_mousemove', function(e) {
// get node scale information
var nodeInfo = zingchart.exec(e.id, 'getxyinfo', {
x: e.guide.x,
y: e.guide.y
});
var currentPosition = (nodeInfo[0] && nodeInfo[0].scalevalue) ? nodeInfo[0].scalevalue : null;
// light sanity checks
// dont want to update if value stayed the same
if (currentPosition > -1 && currentPosition != previousPosition) {
console.log('hi')
zingchart.exec(e.id, 'modify',{
data: {
plot: {
rules: [
{
rule: '%kv < ' + currentPosition,
lineWidth: 5,
},
{
rule: '%kv < ' + currentPosition,
alphaArea: 0,
alpha:1
}
]
}
}
});
}
previousPosition = currentPosition;
});
// render chart
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
