How i can render custom axisBottom format like it was possible in 0.79.1

[PawelGIX]

Describe/explain the bug
After update nivo to latest version 0.99.0 there is no way to override axis format() function with custom output.
This code won't work anymore on @nnivo/line chart:

      format: (d) => {
          var m = d.toLocaleString("en-GB", { month: "short" });
          
          return (
              <>
                  <tspan fontSize={19}>{m}</tspan>
                  <tspan fontSize={19} y={23} x={0}>
                      {d.getFullYear()}
                  </tspan>
              </>
          );
      },

because the output of this function is casted to a string

This wasn't the case in version 0.79.1.
Unfortunately, this breaks my application. Is there a workaround, or can I restore the previous behavior of this function, i.e., not force conversion to string?

Bug Example

This is how it used to work:
https://codesandbox.io/p/sandbox/distracted-cherry-wxm5xx

There is issue in newer version:
https://codesandbox.io/p/devbox/epic-babycat-hqvf72

Issue is there due this line:

nivo/packages/axes/src/components/AxisTick.tsx

Line 43 in 2cf2243

{`${value}`}

Regards,
Paweł

[plouc]

@PawelGIX, could you please specify:

• The exact version you're using
• Chart type
• How to reproduce the issue

Following the templated defined here: https://github.com/plouc/nivo/blob/master/.github/ISSUE_TEMPLATE/bug_report.md

[PawelGIX]

I added more information including an example chart

[plouc]

@PawelGIX, thank you for the extra context, the API was changed because returning a react element from the formatting function wasn't portable across implementations (especially canvas), so formatting and rendering are decoupled.
It's now a bit more involved to change the rendering, but it's doable using the renderTick property of the axis, although you will have to render the whole tick, not just the text, you can find the default tick component here.

[PawelGIX]

Thank you, it worked.

But i found what i believe is bug in tooltip. Can you confirm?

function CustomTooltip({ point }) {
    const { x, y, data = {} } = point;

    if (!data.x) {
        return ''
    }
    var date = formatDate(data.x, 'MMM Y');
    return <div className="OrdersChart__tooltip">{date}</div>

}

1. When I place className on tooltip it won't render, but when i remove className="" it works
2. I can't use tooltip={} prop as render function, like before. Only custom functional component works right now.

Also for some reason this won't render: <div><div data-tooltip="OrdersChart__tooltip">zzz</div></div>
But this render fine <div><div data-tooltip="OrdersChart__tooltip">zzz</div>A</div>

For now, I'll probably use this solution, but it's a workaround for the tooltip issue. It's silly, but for some reason, it works.

return <div><div data-tooltip="OrdersChart__tooltip">zzz</div>&nbsp;</div> 🙃