I’m trying to create a chart in Oracle Apex that shows 2 values based on hidden page items but at the moment the region is empty and I can’t get it to use the values that in the page items. The page items are as follows…

:P8_TOTAL which has a value of 7405401
:P8_TARGET which has a value of 7564125

I’ve changed them from hidden to number fields just to ensure they are returning values.

On the page I have added this to the File URLs: https://cdn.jsdelivr.net/npm/apexchart

The region the chart should be displayed is a static content with this source: <div id="chart" style="height: 350px; width: 100%;"></div>

I then have a dynamic action which executes on page load the following javascript code…

document.addEventListener("DOMContentLoaded", function() {
    try {
        var totalOrderValue = parseFloat($v('P8_TOTAL').replace(/,/g, '')) || 0;
        var targetValue = parseFloat($v('P8_TARGET').replace(/,/g, '')) || 0;

        if (isNaN(totalOrderValue) || isNaN(targetValue)) {
            throw new Error("Invalid values for P8_TOTAL or P8_TARGET.");
        }

        var options = {
            chart: {
                type: 'radialBar',
                height: 350
            },
            series: [totalOrderValue, targetValue],
            labels: ['Total Order Value', 'Target'],
            plotOptions: {
                radialBar: {
                    dataLabels: {
                        name: {
                            fontSize: '16px',
                            offsetY: 20
                        },
                        value: {
                            fontSize: '24px',
                            offsetY: 10,
                            formatter: function(val) {
                                return val.toLocaleString();
                            }
                        }
                    }
                }
            },
            colors: ['#FF4560', '#00E396'],
            fill: {
                type: 'solid'
            },
            stroke: {
                lineCap: 'round'
            }
        };

        var chartContainer = document.querySelector("#chart");
        if (chartContainer) {
            var chart = new ApexCharts(chartContainer, options);
            chart.render().then(() => {
                console.log("Chart rendered successfully");
            }).catch(error => {
                console.error("Error rendering chart:", error);
            });
        } else {
            console.error("Chart container not found.");
        }
    } catch (error) {
        console.error("JavaScript error:", error);
    }
});

I've investigated the browser console and it's not displaying any errors

Where am I going wrong?