ZingChart: How do I make a label or scale value clickable?
You can register click events on all ZingChart text labels by setting the attribute flat:false , which tells our library to bind a click event to that piece of text.
scaleY:{
label:{
text: 'Expenses',
flat: false,
id: 'try_me'
}
},
scaleX: {
label: {
text: 'Hour',
flat: false
}
},Note: The idea of flat is that we do not render these objects flattened into the chart but rather keep them as full-fledged objects. This is a trade-off for performance in that mostly developers do not want everything clickable and doing so would be much more heavy weight and limit charting speed.
If we bound events to every piece of text this could be very time consuming if you have many many labels on the chart. The default behavior for labels is flat:true . You can set all labels in the chart to be clickable with our root level globals object
type: 'bar',
globals: {
flat:false
},
// rest of chartAll click events are registered within our API event label_click . You can differentiate the labels by various id's that are set internally.
zingchart.bind(null, 'label_click', function(e) {
if (e.labelid === 'si_title') {
if (e.scale === 'scale-x') {
window.alert('scale-x'); // window.open('https://subnav1'); // call sub navigation within your app etc...
} else {
window.alert('scale-y'); // window.open('https://subnav2'); // call sub navigation within your app etc..
}
}
});
Example: //demos.zingchart.com/view/FPYOAX8C