reactjs - Recharts - 如何强制图表从 x=0 开始？

Question

我正在使用 Recharts 绘制一些图表。根据数据数组的长度，图表不会从 x = 0 开始(不在 x 和 y 的交点处)，也不会在 x 的最大值处结束:



如何强制它始终从 x = 0 开始并占据所有 x 轴？

这就是我实现它的方式:

        <ResponsiveContainer width="100%" height={400}>
            <ComposedChart
                data={chartContent.content.chart}
                //data={data}
                margin={{ top: 5, bottom: 5, left: 5 }}
            >
                <defs>
                    <linearGradient
                        id="colorBtc"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop
                            offset="5%"
                            stopColor="#ff9500"
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor="#ff9500"
                            stopOpacity={0}
                        />
                    </linearGradient>
                    <linearGradient
                        id="colorStock"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop
                            offset="5%"
                            stopColor="#00a1e4"
                            stopOpacity={0.8}
                        />
                        <stop
                            offset="95%"
                            stopColor="#00a1e4"
                            stopOpacity={0}
                        />
                    </linearGradient>
                </defs>
                <XAxis
                    dataKey="date"
                    tickFormatter={formatDate}
                />
                <YAxis tickFormatter={formatYAxis} />
                <CartesianGrid strokeDasharray="3 3" />
                <Tooltip
                    formatter={formatTooltip}
                    labelFormatter={formatDate}
                />
                <Legend />
                <Area
                    name={t("Total amount in BTC")}
                    type="monotone"
                    dataKey="investment_total_btc"
                    stroke="#ff9500"
                    fillOpacity={1}
                    fill="url(#colorBtc)"
                />
                <Area
                    name={`${t("Total amount in")} ${
                        chartContent.content.symbol
                    }`}
                    type="monotone"
                    dataKey="investment_total_stock"
                    stroke="#00a1e4"
                    fillOpacity={1}
                    fill="url(#colorStock)"
                />
                <Line
                    name={t("Total invested in $")}
                    dataKey="invested"
                    type="monotone"
                    stroke="#ff0000"
                    dot={false}
                />
            </ComposedChart>
        </ResponsiveContainer>

不幸的是，API 文档不是很清楚，我找不到解决方案。

提前致谢

Answer 1

对我的场景有帮助的是添加 dataMax + 1 到 XAxis 组件的域参数。
根据文档所说的内容，我假设为域数组的第一个元素添加“dataMin”会有所帮助。然而，它是dataMax + 1为我解决了
完整片段

        <XAxis
          dataKey="date"
          name="Time"
          type="number"
          domain={["dataMin", "dataMax + 1"]}
          tickFormatter={(tickItem) => moment(tickItem).format("MMM Do YY")}
       />