Данные в series

Нашёл пример круговой диаграммы написанной на javascript на сайте HighCharts:

<script type="text/javascript">
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares in January, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Chrome',
                y: 61.41,
                sliced: true,
                selected: true
            }, {
                name: 'Internet Explorer',
                y: 11.84
            }, {
                name: 'Firefox',
                y: 10.85
            }, {
                name: 'Edge',
                y: 4.67
            }, {
                name: 'Safari',
                y: 4.18
            }, {
                name: 'Other',
                y: 7.05
            }]
        }]
    });
</script>

А как мне сделать так что бы не писать на каждый новый элемент данные а сразу передать туда класс? Вот мои входные данные в контроллере которые на сайте в примерах используются для этой же диаграммы только без javascript а с использованием highcharts для dot.net

List<PieSeriesData> pieData = new List<PieSeriesData>();
            pieData.Add(new PieSeriesData { Name = "FireFox", Y = 45.0 });
            pieData.Add(new PieSeriesData { Name = "IE", Y = 26.8 });
            pieData.Add(new PieSeriesData { Name = "Chrome", Y = 12.8, Sliced = true, Selected = true });
            pieData.Add(new PieSeriesData { Name = "Safari", Y = 8.5 });
            pieData.Add(new PieSeriesData { Name = "Opera", Y = 6.2 });
            pieData.Add(new PieSeriesData { Name = "Others", Y = 0.7 });
            ViewData["pieData"] = pieData;
            return View();

И вот как я их пытаюсь подкинуть в данные series:

<script type="text/javascript">
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares in January, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: @Html.Raw(Json.Encode(ViewData["pieData"] as List<PieSeriesData>))
        }]
    });
</script>

Данные сериализуются, но почему то диаграмма не строится, а только шаблон для неё, что я делаю не так? Вот как она выглядит в таком случае:

Вот что находится на странице в data:

data: [{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"FireFox","Selected":false,"Sliced":null,"Y":45,"CustomFields":{}},{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"IE","Selected":false,"Sliced":null,"Y":26.8,"CustomFields":{}},{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"Chrome","Selected":true,"Sliced":true,"Y":12.8,"CustomFields":{}},{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"Safari","Selected":false,"Sliced":null,"Y":8.5,"CustomFields":{}},{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"Opera","Selected":false,"Sliced":null,"Y":6.2,"CustomFields":{}},{"ClassName":"","Color":"undefined","ColorIndex":null,"DataLabels":{"BackgroundColor":"","BorderColor":"undefined","BorderRadius":0,"BorderWidth":0,"ClassName":"","Color":"","ConnectorColor":"{point.color}","ConnectorPadding":5,"ConnectorWidth":1,"Crop":true,"Defer":true,"Distance":30,"Enabled":true,"Filter":{"Operator":"","Property":"","Value":null},"Format":"","Formatter":"","Inside":null,"Overflow":0,"Padding":"5","Rotation":0,"Shadow":{"Enabled":false,"Color":"","OffsetX":0,"OffsetY":0,"Opacity":0,"Width":0},"ShadowBool":null,"Shape":"square","SoftConnector":null,"Style":{"Color":"contrast","FontSize":"11px","FontWeight":"bold","TextOutline":"1px contrast"},"UseHTML":false,"VerticalAlign":2,"X":0,"Y":-6,"ZIndex":6},"Description":"undefined","Drilldown":"","Events":{"Click":"","MouseOut":"","MouseOver":"","Remove":"","Select":"","Unselect":"","Update":""},"Id":"null","Labelrank":null,"LegendIndex":null,"Name":"Others","Selected":false,"Sliced":null,"Y":0.7,"CustomFields":{}}]