This is my client website. It shows the gold rate in the UAE in Arabic. I have embedded Chart.js, which displays the gold rate for the last four years, but the chart is in English. I am facing two problems:

1. The digits are in English instead of Arabic.
2. The text is supposed to be right-to-left (RTL), but it is displayed left-to-right (LTR).

If you see the chart only labels are in Arabic
The website is made in wordpress.

I read the Chart.Js documentation and change the properties but the result is not achieve.
I also ask chatGPT but that solution also does not work.

<div class="chart-container" style="position: relative; height:60vh;">
    <canvas id="myChart"></canvas>
</div>
<button id="days7">Show 7 Days Data</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.umd.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const ctx = document.getElementById('myChart').getContext('2d');
        
        // Predefined datasets and labels
        const datasets = [
            { label: "عيار 24", color: "#085703", rates: <?php echo json_encode($finalRates); ?> }
        ];

        // Initialize the chart
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: datasets.map(ds => ({
                    label: ds.label,
                    data: [],
                    backgroundColor: "#fbfbfb",
                    borderColor: ds.color
                }))
            },
            options: {
                maintainAspectRatio: false,
                    responsive: true,
                    interaction: {
                        intersect: false,
                        axis: 'x'
                    },
                    plugins: {
                        title: {
                            display: true,
                        },
                        legend: {
                    display: true,
                    position: 'top',
                    align: 'center',
                    rtl: true,
                },
            }
        });

        // Fetch data and update the chart
        function updateChart(days) {
            const endDate = new Date();
            const startDate = new Date();
            startDate.setDate(endDate.getDate() - days);

            const dates = [];
            for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
                if (d.getDay() !== 0) dates.push(d.toISOString().split('T')[0]); // Exclude Sundays
            }
            dates.reverse();

            myChart.data.labels = dates;
            datasets.forEach((ds, i) => {
                myChart.data.datasets[i].data = ds.rates.slice(0, dates.length);
            });
            myChart.update();
        }

        // Add event listener for the 7-day button
        document.getElementById('days7').addEventListener('click', () => updateChart(7));

        // Default chart view
        updateChart(7);
    });
</script>