CODEWITHSUNDEEP
highcharts
Pat
Pat

Reputation: 15

Linking highcharts text renderer to javascript function

I would like to add a text link in my chart that will execute a javascript function. However, as you can see in this fiddle, it looks like text renderer only accepts a URL link. I notice that a credit can link to a javascript just fine and currently I'm using this as a workaround. Is this possible to achieve using text renderer?

chart.renderer.text('<a href="javascript:alert(1)">Text renderer javascript link</a>', 120, 60)

Upvotes: 0

Views: 1111

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use Mark's construction or simpler: 

chart.renderer.text('Text renderer javascript link', 120, 60)
    .css({
        color: '#4572A7',
        fontSize: '16px',
        cursor: 'pointer' // make it look clickable
    }).add().on('click',function(){
          alert('aaa');
    });

Upvotes: 0

Mark
Mark

Reputation: 108567

The renderer.text method creates an svg element and only supports a subset of HTML tags. Also, adding a javascript handler in the href is rather dated. So, provide the handler using jquery's click binding.

function(chart) { // on complete
    var elem = chart.renderer.text('Text renderer javascript link', 120, 60)
        .css({
            color: '#4572A7',
            fontSize: '16px',
            cursor: 'pointer' // make it look clickable
        }); // save the element
    elem.add(); // add it 
    $(elem.element).click(function(){
       alert('hi'); 
    }); //bind a handler 
});

Updated fiddle.

Upvotes: 1

Related Questions