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.

        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: {
// rest of chart

All 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


Labels Tutorial
API Events

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us