Chartjs 4.1.1 Y axis scale-CodePudding

I would like to set min and max scale in Y axis, I've been tried suggestedMin, min and max, but it doesn't works.

This message is displayed at the console Uncaught SyntaxError: Cannot use import statement outside a module


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.umd.js"></script>

<canvas  id="myChart" height="280px"></canvas>
<script type="module">
        $(window).on("load",function() {
            // page is fully loaded, including all frames, objects and images
            
            var ctxChart = document.getElementById("myChart");
            ctxChart.height = 120;
            var myChart = new Chart(ctxChart, {

                type: "bar",
                data: {
                    labels: ["09/Aug/2021", "16/Aug/2021", "06/Sep/2021", "14/Oct/2021", "19/Oct/2021"],
                    datasets: [
                        {
                          label: "Max and Min - Day",
                          data: [["10000000", "10000000"], ["10000000", "10000000"], ["15000000", "10000000"], ["10000000", "10000000"], ["22000000", "22000000"]],
                          backgroundColor: "rgb(74,152,176, 0.5)",
                          order: 1
                        },
                        {
                          label: "Day Avg",
                          data: ["10000000", "10000000", "12500000", "10000000", "22000000"],
                          borderColor: "rgb(191,110,131)",
                          backgroundColor: "rgb(191,110,131)",
                          type: "line",
                          order: 0,
                          pointRadius: 5,
                          pointHoverRadius: 5
                        },
                        {
                          label: "Global Avg",
                          data: ["16000000", "16000000", "16000000", "16000000", "16000000"],
                          borderColor: "rgb(244,209,76)",
                          backgroundColor: "rgb(244,209,76)",
                          type: "line",
                          order: 0,
                          pointRadius: 3,
                          pointHoverRadius: 3
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: "top",
                        },
                        title: {
                            display: true,
                            text: "Price"
                        },
                        subtitle: {
                            display: true,
                            text: "example.com"
                        }
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: "$"
                            }
                        }
                    }
                }
                
                
            });
        });
</script>

CodePudding user response：

You need to remove the top script tag, then it will work fine.

So you need to remove this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.1/chart.min.js?ver=1"></script>