Interactivity
About
SenCharts creates interactive charts with zooming and panning features. These functionalities are launched via the following mouse commands:
- Click and drag to create a zooming area. Then release to zoom in.
- Double-click and drag to pan.
- Double-click and release to come back to the initial display.
You can zoom in or pan a chart once it gets plotted. Zooming is enabled upfront and can take place as long as the zooming area contains data. Panning requires data to be left out of the current scope. Often you have to zoom in before being able to pan a chart. An Interactivity object defines how the zooming and panning are performed.
Properties
The following properties can be set:
| Property | Definition | Type | Default |
|---|---|---|---|
| zoomRect | Rectangle delimiting the zooming area | RectStyle | { cornerRadius: 0, stroke: 'black'', strokeWidth: 1, strokeDashArray: '2 2', fill: 'none' } |
| panningSpeed | Panning speed | Number (ranges from 1 to 5) | 2 |
Example
In the first example, we give a light gray color to the zooming area's background. In the second example, we give it a light blue color and a plain blue line border. We also set the panning speed to 5. So, panning is faster in the second chart than in the first one.
chart.interactivity.zoomRect.fill = 'lightgray';
chart.interactivity = {
zoomRect: {
fill: 'lightblue',
stroke: 'blue',
strokeDashArray: 'none'
},
panningSpeed: 5
};