Y-axis customised ticks/label to use pound/euro symbol

[MarkForLoop]

I am trying to get the y-axis to display with the pound/euro symbols but when trying to use the customized label to edit the numbers

I have been using this example (https://recharts.org/en-US/examples/ComposedChartWithAxisLabels) as reference

this is the label I have so far but It is not doing anything

const CustomizedAxisLabel = (props: any) => {
  const { x, y, stroke, payload } = this.props;

  return (
    <text x={x} y={y}>
      {new Intl.NumberFormat("en-GB", {
        style: "currency",
        currency: "GBP",
        maximumFractionDigits: 2,
        minimumFractionDigits: 0,
      }).format(payload.value)}
    </text>
  );
};



        <YAxis
          dataKey="value"
          axisLine={false}
          label={<CustomizedAxisLabel />}
        />

[MarkForLoop]

if anyone could help me with this it would be greatly appreciated + figure out what the correct types for the label would be a god send

[ckifer]

Hey there, this will be easier with the tickFormatter function on the Axis

Please see https://codesandbox.io/s/composed-chart-with-axis-label-forked-28yq7f?file=/src/App.tsx as an example

      <YAxis
        label={{ value: "Index", angle: -90, position: "insideLeft" }}
        tickFormatter={(value) => `€${value}`}
      />

I just used the symbol for simplicity, but you can add your call to Intl.NumberFormat in there