Spy
About
A Spy enhances the exploration of a chart by revealing axis values and projecting them on the chart with a line. It's a sort of dynamic gridline that moves with the mouse pointer. It comprises of a gridline and a tick value surrounded by a rectangle.
Properties
The following properties can be set:
| Property | Definition | Type | Default |
|---|---|---|---|
| visible | Spy's visibility | Boolean | true |
| lineStyle | The gridline's style | LineStyle | { stroke: 'black', strokeWidth: 1, strokeDashArray: 'none'} |
| textStyle* | The tick value's style | TextStyle | { color: 'white', fontSize: 10, fontWeight: 'normal', fontFamily: 'system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif"'} |
| rectStyle | The rectangle's style | RectStyle | { cornerRadius: 0, stroke: 'black', strokeWidth: 1, strokeDashArray: 'none', fill: 'black'} |
* For consistency's sake, the Spy's textStyle is closely synchronized with the style of the corresponding axis' tick. Only the color property can be set different.
Example
In the following examples, we create charts with different spy settings. The first one shows styled spies on both axes. We hide the Y-axis spy on the second chart. Move the mouse above the charts to see the spies.
//style vertical spy
chart.layout.xAxis.spy = {
lineStyle: {
stroke: 'gray'
},
textStyle: {
color: 'black',
fontSize: 12
},
rectStyle: {
cornerRadius: 2,
fill:'gray'
}
};
//style horizontal spy
chart.layout.yAxis.spy = {
lineStyle: {
stroke: 'gray'
},
textStyle: {
color: 'black',
fontSize: 12
},
rectStyle: {
cornerRadius: 2,
fill: 'gray'
}
};
//hide horizontal spy
chart.layout.yAxis.spy.visible = false;
//style vertical
chart.layout.xAxis.spy = {
lineStyle: {
stroke: 'red',
strokeWidth: 2
},
textStyle: {
color: 'red',
fontSize: 12
},
rectStyle: {
cornerRadius: 5,
stroke: 'red',
fill: 'white'
}
};