Search code examples
reactjsrecharts

Recharts set Y-axis to YES and NO

What code changes would I need to make to replace 1 with YES and 0 with NO?

It seems like it should be possible from the examples on http://recharts.org/ or just finding it from a general search, however I haven't found anything that resolves this.

The only part of the code that is I didn't post here are the imports at the top of the file.

Here is the graph

enter image description here


const data = [
  {yl: "YES",name: "p1",'X axis': 1,},
  {yl: "YES",name: "p2",'X axis': 1,},
  {yl: "NO" ,name: "p3",'X axis': 0,},
];
export const esChart: React.FC = () => {
  return (
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 100,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis tickCount={1} />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey='X axis'
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
    </LineChart>
  );
}

export default esChart;
Solution

  • You need to add tickFormatter prop to customize the same. (Working codesandbox)

    <YAxis tickCount={1} tickFormatter={(...allArgs)=>{ console.log(allArgs) if(allArgs[0] ===0){ return "Y" }else{ return "N" } }}/>