I’m trying to build a reusable chart component that will suit my needs for this project

Currently I’m having issues with doing the highlight bellow

The issue is those yellow-ish highlights are only possible to do the way I want them if I set the X axis to type number, but then the Issue will be another one when I do the same thing with months

I tried to set the

<ReferenceArea x1={2006} x2={2006} />
<ReferenceArea x1={2006} x2={2007} />

The only one that works is

<ReferenceArea x1={2006} x2={2008} />

But issue with this one is that it wouldn’t be centered with the year.

Current code:

    const renderGraphComponent = (unit: YAxisKey<T>) => {
            return <Line {...unit} dataKey={unit.key} key={unit.key} dot={false} />;
         }

return (
        <ResponsiveContainer minWidth={1200} width={'100%'} height={'80%'}>
            <ComposedChart
                onMouseMove={handleTooltipPayload}
                data={[...data]}
                margin={{ right: 50 }}
            >
                {yAxisKeys.map(yAxis => renderGraphComponent(yAxis))}
                <Tooltip wrapperStyle={{ display: 'none' }} />
                <defs>
                    <LinearGradient defs={yAxisKeys} />
                </defs>
                <CartesianGrid vertical={false} stroke="#ccc" strokeDasharray="10 5" />
                <XAxis
                    tick={{ textAnchor: 'middle' }}
                    tickLine={false}
                    type="category"
                    tickMargin={10}
                    dataKey={String(xAxis)}
                />
                <YAxis type="number" tickLine={false} />
                <ReferenceArea
                    x1={2012}
                    x2={2014}
                />
            </ComposedChart>
        </ResponsiveContainer>
    );