Change tickmark

[matobiely]

Hi,
i want to change default tickmark, which is line
---|---|---|

to circle, like this:
--o---o---o---o---o

I could not find any docs how to do it.
Is it even possible to do it via prop or custom layer is needed?

Thanks

[wyze]

You can pass a custom component to renderTick. The default implementation is here: https://github.com/plouc/nivo/blob/master/packages/axes/src/components/AxisTick.tsx

You would do something like the following:

function CustomTick(props) {
  return (
    <g>
      <circle {...} />
      <text {...}>{value</text>
    </g>
  )
}

function Chart() {
  return <Bar {...} axisBottom={{ renderTick: CustomTick }} />
}

[matobiely]

Great, thank you