Clickable/Linkable Ticks

[errantmind]

Hello, I have a stacked horizontal bar chart showing some metrics for different 'sites', which are along the y-axis (the ticks). I'd like to make those sites clickable to go to particular pages, or maybe trigger a custom 'on click' event. Is this possible?

[rokotyan]

@errantmind You can set up events for Axis components just like for any other component. Here's how to do it for a click event:

import { VisAxis,  ... } from '@unovis/react'
import { Axis } from '@unovis/ts'

...
<VisAxis
  ...
  events={{
    [Axis.selectors.tick]: {
      click: (tickValue: number) => console.log(tickValue),
    },
  }}
/>

[errantmind]

Great, thanks

[rokotyan]

@errantmind You're welcome!

We'll soon release a new version that will also allow additional styling of the tick labels: #223

[rokotyan]

@errantmind Unovis 1.2 has just been released with new CSS variable to style your axis:

[errantmind]

Very nice, thanks