Chartjs-Is there a better way to create an 'n' number of charts in ChartJS and ASP.NET C#?

This is a working answer for the javascript:

        var eventList = function () {
            var tmp = null;
            $.ajax({
                'async': false,
                url: 'Tree/getEventIDs',
                type: 'POST',
                data: {},
                'success': function (data) {
                    tmp = data;
                }

            });
            return tmp;
        }();
        for (var i = 0; i < eventList.length; i++) {

            event_fky = eventList[i].event_pky;
            event_name = eventList[i].event_name;
            event_length = eventList[i].event_end;


            var designList = function () {
                var tmpi = null;
                $.ajax({
                    'async': false,
                    url: 'Tree/getDesigns',
                    type: 'POST',
                    data: {event_fky},
                    'success': function (data1) {
                        tmpi = data1;
                    }

                });
                console.log(event_fky);
                console.log(tmpi);
                return tmpi;
            }();
            var dLabels = [];
            var dLengths = [];
            for (var j = 0; j < designList.length; j++) {
                dLabels.push(designList[j].design_name);
                dLengths.push([designList[j].design_start, designList[j].design_end]);
            }

            const newCanvas = document.createElement("canvas");

            newCanvas.id = event_name;

            const currentDiv = document.getElementById("chartSpace");
            var parentDiv = document.getElementById("gridHere");

            parentDiv.insertBefore(newCanvas, currentDiv);
            if (dLabels.length != 0) {
                createChart(dLabels, dLengths, event_name, event_length);
            }
        }
       
    }


  function createChart(labels, cData, evName, evLen) {
        // setup
        const data = {
            labels: labels,
            datasets: [{
                barThickness: 4,
                categoryPercentage: .5,
                label: evName,
                data: cData,
                backgroundColor: [
                    'rgba(' + Math.random() * 85 + ', ' + Math.random() * 170 + ', ' + Math.random() * 255 + ', 1)'
                ],
                borderColor: [
                    'rgba(255, 26, 104, 1)'
                ],
                borderWidth: 0,
                borderSkipped: false,
                borderRadius: 20
            }]
        };

        // config
        const config = {
            type: 'bar',
            data,
            options: {
                indexAxis: 'y',
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    x: {
                        min: 0,
                        max: evLen,
                        ticks: {
                            stepSize: 100

                        }
                    }
                }
            }
        };

        // render init block
        const myChart = new Chart(
            document.getElementById(evName),
            config
        );

        return myChart;
    }