In implementing val.digital’s embeddable charts, I struggled slightly with making HighCharts obey my command when it came to the obligatory credit links. I wanted them to pop up the link in a new window, not the iframe that the chart was contained within.

After failing to get the credits configuration to accept the target link. I resorted to putting a simpl a next to the chart and absolutely positioning it to get it above, entirely circumventing HighCharts.

However, this is not the ideal method! It turns out you can wrap the HighCharts credit logic to open the link you want using HighCharts.wrap, this is sparsely documented, but awesome functionality. You use it like follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Highcharts.wrap(Highcharts.Chart.prototype, 'showCredits', function (next, credits) {
    next.call(this, credits);

    if (credits.enabled) {
        this.credits.element.onclick = function () {
            // Create a virtual link and click it
            var link = document.createElement('a');
            link.target = credits.target;
            link.href = credits.href;
            link.click();
        }
    }
});

// Set the theme as you like
var options = Highcharts.setOptions({
    credits: {
        enabled: NavigationStore.getView() === 'Embed',
        text: 'val.digital',
        href: 'http://val.digital',
        target: '_blank' // Now this works like on an <a> tag
    }
}