Black Lives Matter. Please consider donating to Black Girls Code today.

Hyperlink to a particular date

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).

Any ideas?

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?