Hi, I have a time series chart and I’d like the ability to hyperlink to any particular date on the chart, so that on another webpage I can have a link like 2009-11-23, and that would jump the user to that particular tick within the chart.
I tried using HTML anchors by setting tickformat: '<a name="%Y-%m-%e">%Y-%m-%e</a>. However, that results in <a style="cursor:pointer">2009-11-23</a> (name=is lost).
My chart uses the y-axis for time, so it is vertically oriented and you navigate it by scrolling the page down (it is thousands of pixels long).
I tried adding the “a” elements via javascript to the already rendered chart:
for (let ytick of document.querySelectorAll('g.ytick')) {
let textEle = ytick.querySelector('text');
let dataUnformatted = textEle.dataset.unformatted;
let dateString = dataUnformatted.match(/20\d\d-\d\d-\d\d-\d\d/)[0];
ytick.insertAdjacentHTML('afterbegin', `<a name="${dateString}"></a>`);
}
I can see that the “a” elements are added properly, like <a name="2019-11-19-09"></a>, but the hyperlinks do not jump to that point on the chart.
I guess it doesn’t work since plotly uses SVG, and the name attribute is not supported on SVG’s <a> element?