recharts synchronize x-axis for two datasets - dataset

Question

I'm trying to set up my graph so that it will display barcharts (dataset 1) and linecharts (dataset 2) simultaneously.
However, when I set this up, the x-axis doesn't really sync up together. Is there a way to get the x-axis to sync up for the two datasets? For example, 350 from dataset2 matches on top of 350 from dataset1? The length of dataset2 is about ~200 and the length of dataset1 is about ~2000.
Here is the graph from recharts:
Here is my code:
const barChart = chartData[0] ? (
<ResponsiveContainer width="100%" aspect={2}>
<ComposedChart data={chartData} barGap={0}>
<XAxis dataKey="strike_price" xAxisId={0} />
<XAxis dataKey="strike_price" xAxisId={1} hide />
<XAxis dataKey="strike_price" xAxisId={2} hide />
<XAxis dataKey="strike_price" xAxisId={3} axisLine={false} />
<YAxis tickFormatter={formatNumbers} yAxisId={0} />
<YAxis tickFormatter={formatNumbers} yAxisId={1} orientation="right" />
<Tooltip />
<Legend />
<Bar
data={chartData}
dataKey="c_notion_expo"
fill="green"
xAxisId={0}
barSize={100}
fillOpacity={0.9}
/>
<Bar
data={chartData}
dataKey="p_notion_expo"
fill="red"
xAxisId={1}
barSize={100}
fillOpacity={0.9}
/>
<Bar
data={chartData}
dataKey="total_notional_exposure"
fill="black"
barSize={50}
xAxisId={2}
fillOpacity={0.9}
/>
<Line
data={theoData}
type="monotone"
dataKey="total_gamma"
xAxisId={3}
yAxisId={1}
/>
</ComposedChart>
</ResponsiveContainer>
) : null;