Feature Request: Clickable Labels to Navigate to URLs

[emanuelef]

Hi there,

First off, thank you for this amazing project—it's been a pleasure to use!

I’ve recently integrated it into my project, and I was wondering if it’s possible to make the labels clickable.
Specifically, I’d like to add functionality so that clicking on a label can trigger an action, such as navigating to a specific URL (e.g., the corresponding GitHub repository in my case).

Is this something currently supported, or would it require custom modifications?

Thanks in advance for your insights, and keep up the fantastic work!

[hatemhosny]

hi @emanuelef

Thank you for your kind words. I'm glad you find RacingBars useful.

RacingBars does not provide a way to handle label clicks. However, you can easily do it yourself by directly attaching the event handlers to the DOM elements. See a demo on LiveCodes: https://livecodes.io/?x=id/fpiahd85htw

the important part:

const racer = await race('/data.csv', '#race', options);

// Wait till it renders then, attach click handlers
const sub = racer.on('dateChange', () => {
  document.querySelectorAll('#race text.label').forEach((label) => {
    label.addEventListener('click', () => {
      // do what you want here
      alert(label.textContent);
    });
  });
  sub.remove(); // avoid attaching repeated handlers
});

You may also add CSS like this to give the users a hint that it is clickable:

text.label {
  cursor: pointer;
}

I hope this helps.
Please let me know if you have any other questions.

[emanuelef]

Thank you,
In my case I'm using React so I'll try to adapt the example to it.

[emanuelef]

Thanks, I managed to do that: https://emanuelef.github.io/gh-stars-bars.

[hatemhosny]

That's great.
Well done. Beautiful work.