In this article by Ajit Kumar, the author Sencha Charts Essentials, we will cover the following topics:
(For more resources related to this topic, see here.)
The interactions code is located under the ext/packages/sencha-charts/src/chart/interactions folder. The Ext.chart.interactions.Abstract class is the base class for all the chart interactions.
Interactions must be associated with a chart by configuring interactions on it. Consider the following example:
Ext.create('Ext.chart.PolarChart', {
title: 'Chart',
interactions: ['rotate'],
...
The gestures config is an important config. It is an integral part of an interaction where it tells the framework which touch gestures would be part of an interaction. It’s a map where the event name is the key and the handler method name is its value. Consider the following example:
gestures: {
tap: 'onTapGesture',
doubletap: 'onDoubleTapGesture'
}
Once an interaction has been associated with a chart, the framework registers the events and their handlers, as listed in the gestures config, on the chart as part of the chart initialization, as shown here:
Here is what happens during each stage of the preceding flowchart:
Interactions work on touch as well as non-touch devices (for example, desktop). On non-touch devices, the gestures are simulated based on their mouse or pointer events. For example, mousedown is treated as a tap event.
Here is a list of the built-in interactions:
The interaction also offers additional configs:
For example, we configure the following crosshair interaction on a CandleStick chart:
interactions: [{
type: 'crosshair',
axes: {
left: {
label: { fillStyle: 'white' },
rect: {
fillStyle: 'pink',
radius: 2
}
},
bottom: {
label: {
fontSize: '14px',
fontWeight: 'bold'
},
rect: { fillStyle: 'cyan' }
}
}
}]
The preceding configuration will produce the following output, where the labels and rectangles on the two axes have been styled as per the configuration:
interactions: [{
type: 'crosszoom',
axes: ['left', 'bottom']
}]
This will produce the following output where a user will be able to zoom in to both the left and bottom axes:
Additionally, we can control the zoom level by passing minZoom and maxZoom, as shown in the following snippet:
interactions: [{
type: 'crosszoom',
axes: {
left: {
maxZoom: 8,
startZoom: 2
},
bottom: true
}
}]
The zoom is reset when the user double-clicks on the chart.
Pinch gestures are used for zooming whereas drag gestures are used for panning. For devices which do not support multiple-touch events, zooming cannot be done via pinch gestures; in this case, the interaction will allow the user to perform both zooming and panning using the same single-touch drag gesture.
By default, zooming is not enabled. We can enable it by setting zoomOnPanGesture:true on the interaction, as shown here:
interactions: {
type: 'panzoom',
zoomOnPanGesture: true
}
By default, all the axes are navigable. However, the panning and zooming can be controlled at axis level, as shown here:
{
type: 'panzoom',
axes: {
left: {
maxZoom: 5,
allowPan: false
},
bottom: true
}
}
This interaction does not have any additional config.
In this article, you learned how Sencha Charts offers interaction classes to build interactivity into the charts. We looked at the out-of-the-box interactions, their specific configurations, and how to use them on different types of charts.
Further resources on this subject:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…