javascript - Add Link to X-Label Chart.js -

i'm looking able link x-labels in chart.js bar chart. i've searched pretty thoroughly, , ended trying come own solution: because labels correspond bars directly above them , chart.js has built in getbarsatevent(evt) method, tried creating event if user didn't click on chart - new event had pagex , pagey directly above initial click such if user had clicked on label, new event simulate click on bar graph.

however, calling getbarsatevent(createdclickevent) repeatedly gives me uncaught typeerror ("cannot read property 'getboundingclientrect' of null"), must mean getbarsatevent method, when called on simulated click, isn't returning anything.

any suggestions or alternate approaches appreciated, in advance.

an alternative approach determine point user clicked , based on calculate label clicked. need information chart created , have calculations.

below way of doing that, , here fiddle code/approach. hope helps.

    $("#canvas").click(         function(evt){             var ctx = document.getelementbyid("canvas").getcontext("2d");             // endpoint end of bars area             var base = mybar.scale.endpoint;             var height = mybar.chart.height;             var width = mybar.chart.width;             // call if event under xaxis             if(evt.pagey > base){                 // how many xlabels have                 var count = mybar.scale.valuescount;                 var padding_left = mybar.scale.xscalepaddingleft;                 var padding_right = mybar.scale.xscalepaddingright;                 // calculate width each label                 var xwidth = (width-padding_left-padding_right)/count;                 // determine label clicked on , put bar_index                  var bar_index = (evt.offsetx - padding_left) / xwidth;                 // don't call padding areas                 if(bar_index > 0 & bar_index < count){                     bar_index = parseint(bar_index);                     // either label barchartdata                     console.log("barchartdata:" + barchartdata.labels[bar_index]);                     // or current data                     var ret = [];                     (var = 0; < mybar.datasets[0].bars.length; i++) {                         ret.push(mybar.datasets[0].bars[i].label)                     };                     console.log("current data:" + ret[bar_index]);                     // based on label can call function                 }             }        } );