feature idea: custom axis tick label component

[sto3psl]

Currently the styling options for axis tick labels with @vx/axis are quite limited since they just render a <text /> element. For my use case I need multi line tick labels and some more control over the those.

Idea

1. Use @vx/text to render tick labels.
   This would enable labels to wrap and have multiline support without making the implementation too complex and I think the current API would not have any breaking changes.

2. Add a tickComponent prop
   This would enable the user to have full control over the axis tick labels. The prop would accept a function that takes some arguments for positioning.
   With that approach you could for example render a text and a little icon next to it or anything really. One could also render <Text /> from @vx/text. Adding the tickComponent prop would just call the provided function instead of the default <text /> element. This would also not break the existing API.

Example:

<Axis
  tickComponent={({ x, y, val, format }) => (
    <g>
      <circle cx={x} cy={y} r={2} fill='rebeccapurple' />
      <text x={x + 4} y={y}>Some text</text>
    </g>
  )}
/>

I'm happy to discuss other options and provide a PR if this is a feature @vx/axis should have.
These ideas could be implemented for the axis label aswell.

[sto3psl]

I just saw that <Axis /> accepts children as a function. With that you get all the props to draw your own axis.
https://github.com/hshoff/vx/blob/c66adf2a888572d6c0d77fccda28c338e36312c5/packages/vx-axis/src/axis/Axis.js#L121

This helps a lot, but I still think tickComponent would be nice 😄.

[hshoff]

Good ideas! Happy to add both in an upcoming release.

Better docs will be coming as well.

[sto3psl]

Nice! Do you want me to make a PR?

[hshoff]

Go for it! Would love to land a PR for this

[hshoff]

added in #260