Highchart not working with latest DLL in .Net and JS with the demo code provided

Question

I was trying to upgrade Highcharts from v8.2 to 11.4.7. But as I was facing challenges to do that. I was trying to do a simple implementation using the demo code provided in the site.

The .cshtml code is as below

@{var chartOptions = new Highcharts
        {
            Title = new Title
            {
                Text = "Monthly Average Temperature",
                X = -20
            },
            Subtitle = new Subtitle
            {
                Text = "Source: WorldClimate.com",
                X = -20
            },
            XAxis = new List<XAxis>
            {
                new XAxis
                {
                    Categories = new List<string> { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },

                }
            },
            YAxis = new List<YAxis>
{
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Temperature (°C)"
                    },
                    PlotLines = new List<YAxisPlotLines>
{
                            new YAxisPlotLines
                        {
                            Value = 0,
                            Width = 1,
                            Color = "#808080"
                        }
                    }
                }
            },
            Tooltip = new Tooltip
            {
                PointFormat = "{point.y} - {point.custom1} - {point.custom2}"
                //ValueSuffix = "°C"
            },
            Legend = new Legend
            {
                Layout = LegendLayout.Vertical,
                Align = LegendAlign.Right,
                VerticalAlign = LegendVerticalAlign.Middle,
                BorderWidth = 0
            },
            Series = new List<Series>
{
                new LineSeries
                {
                    Name = "Tokyo",
                    Data = @ViewData["tokyoData"] as List<LineSeriesData>
                },
                new LineSeries
                {
                    Name = "NY",
                    Data = @ViewData["nyData"] as List<LineSeriesData>
                },
                new LineSeries
                {
                    Name = "Berlin",
                    Data = @ViewData["berlinData"] as List<LineSeriesData>
                },
                new LineSeries
                {
                    Name = "London",
                    Data = @ViewData["londonData"] as List<LineSeriesData>
                }
            }
        };

        chartOptions.ID = "chart";
        var renderer = new HighchartsRenderer(chartOptions);
    }

    @Html.Raw(renderer.RenderHtml())

and the rendered script looks like

if (document.addEventListener) {document.addEventListener("DOMContentLoaded", function() {createChartchart();});} else if (document.attachEvent) {document.attachEvent("onreadystatechange", function(){if (document.readyState === "complete"){document.detachEvent("onreadystatechange", arguments.callee);createChartchart();}});}function createChartchart() {var ChartOptions = {"tooltip":{"pointFormat":"{point.y} - {point.custom1} - {point.custom2}"},"chart":{"renderTo":"chart"},"series":[{"data":[{"y":7.0},{"y":6.9},{"y":9.5},{"y":14.5},{"y":18.2},{"y":21.5},{"y":25.2},{"y":26.5},{"y":23.3},{"y":18.3},{"y":13.9},{"y":9.6}],"type":"line","name":"Tokyo"},{"data":[{"y":-0.2},{"y":0.8},{"y":5.7},{"y":11.3},{"y":17.0},{"y":22.0},{"y":24.8},{"y":24.1},{"y":20.1},{"y":14.1},{"y":8.6},{"y":2.5}],"type":"line","name":"NY"},{"data":[{"y":-0.9},{"y":0.6},{"y":3.5},{"y":8.4},{"y":13.5},{"y":17.0},{"y":18.6},{"y":17.9},{"y":14.3},{"y":9.0},{"y":3.9},{"y":1.0}],"type":"line","name":"Berlin"},{"data":[{"y":3.9},{"y":4.2},{"y":5.7},{"y":8.5},{"y":11.9},{"y":15.2},{"y":17.0},{"y":16.6},{"y":14.2},{"y":10.3},{"y":6.6},{"y":4.8}],"type":"line","name":"London"}],"yAxis":[{"plotLines":[{"value":0.0,"color":"#808080","width":1.0}],"title":{"text":"Temperature (°C)"}}],"subtitle":{"text":"Source: WorldClimate.com","x":-20.0},"title":{"text":"Monthly Average Temperature","x":-20.0},"xAxis":[{"categories":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],"legend":{"verticalAlign":"middle","layout":"vertical","align":"right","borderWidth":0.0}};Highcharts.chart("chart",ChartOptions);}

This works fine when i load in JSFiddle. But not working in my application. Giving error : Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Expected to load the simple chart in browser