JS function works only when hard refreshing page

I'm sure this has something to do with the timing of things loading, but I can't figure it out.

I'm using Oracle's Jet charting libraries and trying to convert the y-axis to a percent

When I run this code on page load, it works only when I hard refresh the page as opposed to just hitting f5. But my understanding is it's in a callback here and should only run once the resources are loaded.

When it doesn't work, it tells me oj.IntlNumberConverter is not a constructor.

require(["ojs/ojcore", "ojs/ojconverter", "ojs/ojchart", "ojs/ojpictochart"], function (oj) {
    $('.dyn-chart').each(function () {
        var chart = $(this);
        c  = new oj.IntlNumberConverter({ style : "percent" });
        chart.ojChart(chart.data("chartJson"));
        chart.ojChart( "option", "yAxis.tickLabel.converter", c );
    });
});

I've tried reducing the resources used, but all end up being necessary for it to function.

If I set a timeout of 100ms, it works fine, but seems like that shouldn't need to be done

The issue is likely because the oj.IntlNumberConverter is not fully loaded or available when your callback runs, even though it's within the require block. A clean solution is to ensure the correct module (ojs/ojconverter-number) is explicitly loaded alongside your other dependencies.

require([
    "ojs/ojcore",
    "ojs/ojconverter-number",
    "ojs/ojchart",
    "ojs/ojpictochart"
], function (oj) {
    $(document).ready(function () {
        $('.dyn-chart').each(function () {
            var chart = $(this);
            var c = new oj.IntlNumberConverter({ style: "percent" });
            chart.ojChart(chart.data("chartJson"));
            chart.ojChart("option", "yAxis.tickLabel.converter", c);
        });
    });
});

Add ojs/ojconverter-number: This ensures the oj.IntlNumberConverter module is explicitly loaded and ready when used. Use $(document).ready(): This ensures the DOM is fully loaded before your charts are initialized.

Try this it might be work