I’m using apexchart in a cshtml page to make a combined bar and line chart. On the left bottom corner of the chart, I want it to be 0 but it displays “infinityundefined”. How can I make it 0?

I logged the values of theỉ corresponding months. Here’s my code:

Functions to format number and display the chart

function displayBarAndLineChart(arrayOfQuantities, arrayOfValues, categoriesArray, series1Name, series2Name) {
    var options = {
        series: [{
            name: series1Name,
            type: 'bar',
            data: arrayOfQuantities
        }, {
            name: series2Name,
            type: 'line',
            data: arrayOfValues
        }],
        chart: {
            height: 350,
            type: 'line',
        },
        stroke: {
            width: [0, 4]
        },
        dataLabels: {
            enabled: true,
            formatter: function (value) {
                console.log(formatNumber(value));
                return formatNumber(value);
            }
        },
        xaxis: {
            categories: categoriesArray
        },
        yaxis: [{
            title: {
                text: series1Name,
            },
            labels: {
                formatter: function (value) {
                    return formatNumber(value);
                }
            }
        }, {
            opposite: true,
            title: {
                text: series2Name
            },
            labels: {
                formatter: function (value) {
                    return formatNumber(value);
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#barAndLineChart"), options);
    chart.render();
}

function formatNumber(number) {
    if (number === 0) return "0"; // Return "0" for zero value

    // Define suffixes for different magnitudes
    const suffixes = ['', 'K', 'M', 'B', 'T'];

    // Determine the magnitude of the number
    const magnitude = Math.floor(Math.log10(Math.abs(number)) / 3);

    // Calculate the formatted number
    const formattedNumber = (number / Math.pow(10, magnitude * 3)).toFixed(1);

    // If the formatted number ends with ".0", convert it to an integer
    const finalNumber = formattedNumber.endsWith('.0') ? parseInt(formattedNumber) : formattedNumber;

    // Return the formatted number with suffix
    return finalNumber + suffixes[magnitude];
}

Calling those functions (I wrote these in a script tag in html):

window.onload = function() {
    var dataQuantity = @Html.Raw(soLuongHoaDonsJson);
    var dataValue = @Html.Raw(giaTriHoaDonJson);
    var categories = ["01/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "02/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "03/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "04/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "05/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "06/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "07/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "08/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "09/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "10/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "11/" + @(selectedYear!=null ? selectedYear : now.Year),
                    "12/" + @(selectedYear!=null ? selectedYear : now.Year)];
    displayBarAndLineChart(dataQuantity, dataValue, categories, "Số lượng hóa đơn", "Tổng giá trị")
}

In this case dataQuantity is the array [0,0,0,0,0,0,0,0,0,0,0,1] and dataValue is [0,0,0,0,0,0,0,0,0,0,0,209.46].

I tried @Html.Raw on each element of the categories but it doesn’t work

I tried to log the values of the corresponding months