Recharts Customized XAxis name

Question

I am just getting started learning React and React Native for Web these days. I tried to make a LineChart by using Recharts Library. I expected that the all XAxis name should be shown in the graph; 10시, 11시 ... 24시.

This is my LineData. name is XAsis label name and UV is its value.

let lineData = [
    { name: "10시", uv: 44 },
    { name: "11시", uv: 32 },
    { name: "12시", uv: 14 },
    { name: "13시", uv: 14 },
    { name: "14시", uv: 14 },
    { name: "15시", uv: 34 },
    { name: "16시", uv: 4 },
    { name: "17시", uv: 54 },
    { name: "18시", uv: 14 },
    { name: "19시", uv: 0 },
    { name: "20시", uv: 34 },
    { name: "21시", uv: 54 },
    { name: "22시", uv: 14 },
    { name: "23시", uv: 24 },
    { name: "24시", uv: 34 },
  ];

In the Linechart I am using ResponsiveContainer, XAsis, and YAxis for customizing the graph.

This is my code

<ResponsiveContainer width="100%" height={250}>
              <LineChart
                data={lineData}
                margin={{ top: 20, right: 0, left: -15, bottom: 5 }}
              >
                <Line type="monotone" dataKey="uv" stroke="red" />
                <XAxis
                  dataKey="name"
                  tick={{ fontSize: 10 }}
                  // width="-100"
                  // ticks={[
                  //   10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
                  // ]}
                  // domain={[10, 24]}
                />
                <YAxis tick={{ fontSize: 10 }} ticks={[0, 10, 20, 30, 40]} />
              </LineChart>
            </ResponsiveContainer>

What I mentioned above, the XAsis name should be shown in the graph all of them but part of name only show like this.

10시, 12시, 14시, 16시, 18시, 20시, 22시, 23시 are disapeared. Could you help me with what part do I missing or wrong? I would be really appreciated your help!

Answer 1

I think because you set the width 100% for ResponsiveContainer and you are rendering this graph in narrow screen, Recharts automatically cut some x-axis values.

Have you tried adding interval props for XAxis? If you set interval={0} in XAxis component, you can see all the x-axis values in the screen even it is not wide enough.

<XAxis
  dataKey="name"
  tick={{ fontSize: 10 }}
  interval={0}
/>