Quickchart issue

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.44.0/apexcharts.min.js" integrity="sha512-9ktqS1nS/L6/PPv4S4FdD2+guYGmKF+5DzxRKYkS/fV5gR0tXoDaLqqQ6V93NlTj6ITsanjwVWZ3xe6YkObIQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>

    <div id="chart"></div>
    <script>
        var options = {
            chart: { type: 'heatmap', }, series: [
                { name: 'min 50-59', data: [10, 4, 3, 50, 49, 60, 70, 91, 125] },
                { name: 'min 40-49', data: [10, 4, 3, 50, 49, 60, 70, 91, 125] },
                { name: 'min 30-39', data: [10, 4, 3, 50, 49, 60, 70, 91, 125] },
                { name: 'min 20-29', data: [10, 4, 3, 50, 49, 60, 70, 91, 125] },
                { name: 'min 10-19', data: [31, 40, 35, 50, 49, 60, 70, 91, 125] },
                { name: 'min 00-09', data: [0, 4, 3, 50, 49, 60, 70, 91, 125] }
            ], xaxis: { categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09"] }, stroke: { width: 0 },
            plotOptions: {
                heatmap: {
                    radius: 5,
                    colorScale: {
                        ranges: [
                            { name: 'asd', from: 0, to: 50, color: "#000" },
                            { name: 'samad', from: 51, to: 100, color: "#ddd" },
                            { name: 'samad', from: 101, to: 200, color: "#ccc" }
                        ]
                    },
                    useFillColorAsStroke: true,
                }
            }
        }
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
</body>

</html>