Recharts - How to force chart to start at x=0?

Question

I'm using Recharts to draw some charts. Depending on the length of the data array, the chart doesn't start at x = 0 (not at the intersection of x and y) and doesn't finish at the max value of x:

How can I force it to always begin at x = 0 and occupy all the x axis?

This is how I'm implementing it:

        <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>

Unfortunately the API documentation is not so clear and I couldn't find a solution.

Thanks in advance

Answer 1

What helped in my scenario was to add dataMax + 1 to the domain parameter of the XAxis component.

Based on what the documentation says I would have assumed that adding 'dataMin' for the first element of the domain array would help. However, it was dataMax + 1 that resolved it for me

Full snippet

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