Recharts ComposedChart 从零开始 X 轴刻度

Question

我正在使用 ComposedChart 和 shoing bars 和线。通常该线应从 x 轴的 0 开始。但是当使用 Composed Chart 时无法做到这一点

如果你观察上图中的勾选a应该是从x轴开始（x轴和y轴开始的0点）但不是

这是我正在使用的代码

 <ResponsiveContainer width="100%" height="100%">
          <ComposedChart
            width={500}
            height={400}
            data={[{ count: 0, label: 'a' }, { count: 2, label: 'b' }, { count: 3, label: 'c' }]}
          >
            <CartesianGrid horizontal={false} strokeDasharray="4 4" />
            <XAxis ticks={['a', 'b', 'c']} domain={['dataMin', 'dataMax']} dataKey="label" />
            <YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} />
            <Tooltip />
            <Bar dataKey="count" barSize={20} fill="#AAE5F9" />
            <Line dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
            {/* <LabelList dataKey="name" position="insideTop" /> */}
          </ComposedChart>
        </ResponsiveContainer>

我是否可以从 X 轴的起点开始画线（我的意思是从 x 轴的 0 点开始）？

如有帮助将不胜感激

Answer 1

根据这个 github 问题，您需要在 XAxis

中添加 scale="point"

<XAxis
  ticks={['a', 'b', 'c']}
  domain={['dataMin', 'dataMax']}
  dataKey="label"
  scale="point"
/>

Recharts ComposedChart 从零开始 X 轴刻度

Recharts ComposedChart start X-axis ticks from zero

reactjs

recharts