Angled xAxis is getting Overflow

[jiaulislam]

Hi, Sorry if I somehow duplicated the question but I really searched before posting here. as given in below image the gray color is the div area and dark blue is the recharts ResponsiveContainer area but after doing the xAxis date angle={-30} on the my ticks are getting overflow. what can I do to solve the issue.

Note: I'm using in Next.js 14, recharts=2.12.0

export default function BarChartVerticalGrouped() {


  return (
    <ResponsiveContainer width="100%" height={600} className={"bg-gray-800"}>
      <BarChart
        height={400}
        width={600}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray={"5 5"} />
        <XAxis dataKey={"xLabel"} angle={-30} textAnchor="end" />
        {/* <YAxis dataKey={"turnoverTarget"} /> */}
        <Tooltip />
        <Legend verticalAlign="top" height={36}/>
        <Bar
          dataKey={"turnoverGenerated"}
          fill="#8884d8"
          activeBar={<Rectangle fill="pink" stroke="blue" />}
        />
        <Bar
          dataKey={"turnoverTarget"}
          fill="#82ca9d"
          activeBar={<Rectangle fill="gold" stroke="purple" />}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

[ckifer]

Looks like you just need to add more margin bottom, it doesn't get adjusted automatically

[jiaulislam]

Well ans was the margin but I had to set height for the xAxis. Then the issue was solved