Chart.js: [FEATURE] Add link to point or label

Created on 9 Aug 2017  路  6Comments  路  Source: chartjs/Chart.js

Hello,

Is there any way to add a link on a point of a line chart ?

support

Most helpful comment

@zeckart see http://www.chartjs.org/docs/latest/general/interactions/events.html#events and http://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente

code example:

var cv = document.getElementById('chartJSContainer')
var ctx = cv.getContext('2d');
var chart = new Chart(ctx, options);
cv.onclick = function(evt){
    var activePoint = chart.getElementAtEvent(evt);
    console.log('activePoint', activePoint)
    // var url = ... make link with data from activePoint
    window.location = 'https://www.google.by/search?q=chart+js+events&oq=chart+js+events'
};

All 6 comments

@zeckart what kind of link are you looking to add?

@etimberg a link to an other page

@zeckart see http://www.chartjs.org/docs/latest/general/interactions/events.html#events and http://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente

code example:

var cv = document.getElementById('chartJSContainer')
var ctx = cv.getContext('2d');
var chart = new Chart(ctx, options);
cv.onclick = function(evt){
    var activePoint = chart.getElementAtEvent(evt);
    console.log('activePoint', activePoint)
    // var url = ... make link with data from activePoint
    window.location = 'https://www.google.by/search?q=chart+js+events&oq=chart+js+events'
};

@rmaksim's answer has the best solution. Since everything is on canvas, you'll need to do the hit detection yourself.

Thank's a lot for your help I'm done with that, here is a fiddle:
https://jsfiddle.net/zecka/51w5ttwz/

Sorry to be a bother, but has this been integrated into ChartJs?
I have tried the above example in Chrome Version 79.0.3945.88 and no joy.

It would be great if there was an easy way to associate a point in chart with a url anchor. Even better if we could create a generic code from the point that would be a value in the url.

Is there any hope of this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

SylarRuby picture SylarRuby  路  3Comments

JewelsJLF picture JewelsJLF  路  3Comments

bytesnz picture bytesnz  路  3Comments

lizbanach picture lizbanach  路  3Comments

adriantombu picture adriantombu  路  3Comments