5

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"));
ida
  • 545
  • 2
  • 5
  • 20

2 Answers2

6

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}"/>
Hassan usman
  • 61
  • 2
  • 2
0

You should first convert new Date() to String

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

];

const formatXAxis = (tickItem) => {
  return tickItem.toString();

}
Alex
  • 3,941
  • 1
  • 17
  • 24