I am using a 3rd party API to display a highcharts graph. In this graph there is a credits section that from this 3rd party API is not re-directing anywhere. Because it's a from a 3rd party I do not have the ability to edit the highcharts code directly. I'd like to edit this text element to add an href so upon clicking on it it'll re-direct to a different page. Is this possible from a text element?
I'm attempting to turn this with no href:
<text x="1190" class="highcharts-credits" text-anchor="end" data-z-index="8" style="cursor:pointer;color:#777770;font-size:9px;line-height:10px;font-family:roboto;font-weight:normal;text-shadow:false;fill:#777770;" y="275" aria-hidden="false">Example.com © Natural Earth</text>
into with href:
<text x="10" class="highcharts-credits" text-anchor="start" data-z-index="8" style="cursor:pointer;color:#999999;font-size:9px;fill:#999999;" y="495"><title>Copyright (c) 2020 Highsoft AS, Based on data from Natural Earth</title>Example.com © <a href="http://www.naturalearthdata.com">Natural Earth</a></text>
I attempted to accomplish this by getting the class highcharts-credits and doing an onclick event to redirect to the page i'm hoping here. When doing this nothing is changing.
Here is my code snippet:
let textChange = document.getElementsByClassName("highcharts-credits");
textChange.onclick = function () {
location.href = "www.google.com";
};
<text x="1190" class="highcharts-credits" text-anchor="end" data-z-index="8" style="cursor:pointer;color:#777770;font-size:9px;line-height:10px;font-family:roboto;font-weight:normal;text-shadow:false;fill:#777770;" y="275" aria-label="Chart credits: Source: IBISWorld, Advertising Agencies" aria-hidden="false">Example.com © Natural Earth</text>