Is there a way to make ticks in x and y axis use html content? I want to make it clickable like we can do with the bar or the legend

[aswinfrancis91]

As the title says. I need to be able to click on the x or y-axis tick and call an event. Any help is appreciated. Thanks

[aswinfrancis91]

Achieved it by writing custom tick logic as seen below for x and y axis ticks but would be nice to have a clickevent available without doing this

  const CustomTickYAxis = (tick: AxisTickProps<string>) => {
    const theme = useTheme();
    return (
      <g transform={`translate(0,${tick.y})`}>
        <line x1='0' x2='-5' y1='0' y2='0' stroke='#333' strokeWidth={1.5} />
        <text
          onClick={() => doSomeAction(barData[tick.tickIndex].SomeId)}
          textAnchor='end'
          transform='translate(-10,0) rotate(0)'
          dominantBaseline='central'
          style={{
            ...theme.axis.ticks.text,
            fill: '#333',
            fontSize: 14,
            cursor: 'pointer',
            textDecoration: 'underline',
          }}>
          {tick.value}
        </text>
      </g>
    );
  };

and then use it when defining graph

  axisLeft={{
            renderTick: CustomTickYAxis,
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'SomeData',
            legendPosition: 'middle',
            legendOffset: -250,
            truncateTickAt: 0,
          }}

[plouc]

I agree it could be useful in certain cases, but this is not a common need IMHO, and the charts already have tens (if not hundreds) of props, so I think using a custom tick is not unreasonable here.