كيف أقوم برسم شريط تقدم في الجزء السفلي من الرسم البياني باستخدام React Chart.js

السلام عليكم 
بما أن حضرتك تستخدم react-chartjs-2
ف هناك component موجود فيها خاص بالprogress bar 
و هذا مثال على عمل الcomponent و جعلة جاهز للاستخدام
 

import { Bar } from "react-chartjs-2";

export default function ProgressBar({ data, options }) {
  return <Bar options={options} data={data} />;
}

و بعد أن تقوم بانشاء ذلك الcomponent فقم باستخدامة في الملف الذي قمت بإدراجة في المكان الذي تريدة على هذا النحو 
 

let data = {
        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,
            },
        ],
    };
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',
                    }}
                >
 <Bar  data={data} />
</div>
            </div>
        </div>
    </>
)

مع ملاحظة أنني قمت بنقل المتغير data ليكون global حتى يمكن التعرف علية من أي مكان في الكود