The next level of interaction is that when the user clicks on a chart item, we may want to highlight that item and show the item detail corresponding to it. In this recipe, we will see how to achieve this.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Carry out the following steps:
Edit the
ch07_06.js
file.Add the following interactions to the chart's
interactions
array:{ type: 'iteminfo', gesture: 'taphold', listeners: { show: function(me, item, panel) { panel.update(item.value[0] + " : " + item.value[1]); } } }, { type: 'itemhighlight' }
Save the change.
Deploy and access it from the browser or the device of your choice.
Single tap on a bar, this will highlight the bar.
Tap on the bar and hold it for a while. You will see a pop-up showing the item detail as shown in the following screenshot: