I’m trying to create a chart that has both a bar dataset and a line dataset. When I load the page, the model populates correctly as far as I can see, but the chart doesn’t show up and the only errors or clues I have are Dashboard:57 Uncaught SyntaxError: Unexpected end of input and in the debug output: Exception thrown: ‘System.FormatException’ in System.Private.CoreLib.dll . I’m not sure the second error is related but thought it might help. My code for the chart is as follows:

<div id="chartContainer" style="width: 100%; height: 150px;">
    <canvas id="ticketCountChart" width="1100" height="180"></canvas>
</div>

<script>
        var ctx = document.getElementById('ticketCountChart').getContext('2d');

        var newTicketData = @Model.DashboardMetrics.HourlyTicketData;
        var resolveddData = @Model.DashboardMetrics.HourlyResolvedTicketsData;

        var labels = newTicketData.map(item => item.Hour);

        var lineBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [
                    {
                        type: 'line',
                        label: 'New Tickets',
                        data: newTicketData.map(item => item.NewTicketsCount),
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true
                    },
                    {
                        type: 'bar',
                        label: 'Resolved Tickets',
                        data: resolvedData.map(item => item.ResolvedTicketsCount),
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Hour'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Tickets'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Tickets Overview (Last 24 Hours)'
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function (tooltipItem) {
                                var label = tooltipItem.dataset.label || '';
                                var value = tooltipItem.raw;
                                return label + ': ' + value;
                            }
                        }
                    }
            }
        });
    });
</script>

I’ve tried parsing the data to get rid of any leading zeroes and ensuring the data points are being accessed as ints, but that hasn’t had any effect. Triple-checked all the options, missing parentheses etc but can’t see anything wrong