React Char.js

Hi i am integrating charts by using react-chartJs-2 i want to draw line with at the bottom of chart like progress bar when record increase it also increase please provide me any solution

 useEffect(() => {
        const chartData = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [
                {
                    label: 'Temperature',
                    data: [20, 22, 25, 24, 26, 28, 30],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    tension: 0.1,
                },
            ],
        };

        const chartOptions = {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                        },
                    },
                ],
            },
        };

        const createGradientLineAnnotation = (chart) => {
            const ctx = chart.ctx;
            const xAxis = chart.scales['x-axis-0'];
            const yAxis = chart.scales['y-axis-0'];
            const bottomLineY = yAxis.bottom;

            const gradient = ctx.createLinearGradient(0, bottomLineY - 10, 0, bottomLineY);
            gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // Red
            gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)'); // Green
            gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // Blue

            const annotation = {
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: bottomLineY,
                borderColor: gradient,
                borderWidth: 10,
            };

            chart.annotation.elements.push(annotation);
        };

        const ctx = document.getElementById('myChart').getContext('2d');

        const chart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: chartOptions,
            plugins: [createGradientLineAnnotation],
        });

        return () => {
            chart.destroy();
        };
    }, []);






    return (
        <>
            <div style={{ height: "100vh" }}>
                <div style={{ width: "50%", margin: "auto" }}>
                    <Line data={data} />
                </div>
                <div style={{ width: "50%", margin: "auto", position: "relative" }}>
                    <canvas id="myChart" />
                    <div
                        style={{
                            position: 'absolute',
                            bottom: '30',
                            left: "27",
                            width: '70%',
                            borderBottom: '2px solid black',
                        }}
                    ></div>
                </div>
            </div>
        </>
    )