Some XAxis not showing

I have a simple BarChart, with a XAxis. In some cases, some of the labels are simply not showing up. In the image below, only the middle label is appearing.

Here’s the code:

<BarChart data={data} barSize={SIZE} width={WIDTH} height={HEIGHT} margin={{ top: 80 }}>
   <XAxis dataKey="name" tick={<CustomizedAxisTick />} />
   <Tooltip formatter={formatTooltip} />
   <Bar dataKey="local" fill="#1f40e6" label={<CustomizedLabel />} />
   <Bar dataKey="global" fill="rgba(30, 63, 230, 0.6)" label={<CustomizedLabel />} />
</BarChart>

and

const CustomizedLabel = props => {
  // eslint-disable-next-line react/prop-types
  const { x, y, payload } = props;

  return (
    <Text
      x={x}
      y={y + 3}
      fill="#002960"
      fontSize={11}
      textAnchor="middle"
    >{truncate(payload.value)}</Text>
  );
};

[xile611]

@matheusml By default, we’ll hide some ticks of XAxis when no enough space.

related code

If you want to show all the ticks, you can set the props interval of XAxis to be 0.

[roushanraj]

I was also facing the same issue. Following is the snippet which worked for me: <XAxis dataKey="name" textAnchor= "end" sclaeToFit="true" verticalAnchor= "start" interval={0} angle= "-40" stroke="#8884d8" />