Recharts XAxis is not showing the date value from tickFormatter

Question

I'm using recharts to show formatted date value is the x axis label but it' not working i have tried using the tickFormatter but it is not showing the converted date.

import React from "react";
import { render } from "react-dom";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";

const styles = {
 fontFamily: "sans-serif",
 textAlign: "center"
};

const data = [
 { quarter: new Date(), earnings: 13000 },

];

const formatXAxis = (tickItem) => {
  return tickItem.toLocaleDateString();
}

const App = () => (
 <div style={styles}>
  <h1>Recharts basic demo</h1>
  <BarChart width={500} height={300} data={data}>
  <XAxis dataKey="quarter" tickFormatter="{formatXAxis}"/>
  <YAxis dataKey="earnings" />
  <Tooltip/>
  <Bar dataKey="earnings" />
 </BarChart>
</div>
);

render(<App />, document.getElementById("root"));

Answer 1

you should not wrap tickFormatter value with the quotation it should be like this:

 <XAxis dataKey="quarter" tickFormatter={formatXAxis}/>

not like this:

<XAxis dataKey="quarter" tickFormatter="{formatXAxis}"/>