Javascript 图表js将点移近图表的中间

我尝试了很多不同的ticks回调函数，但我在左/右填充方面遇到了问题。我需要这样的图表

我的配置：

        const chartData = Array.from(
            { length: 30 },
            (_, i) => (i + 1) * Math.random() * 20000
        );
        chartData.unshift(null);
        chartData.push(null);
        return {
            expanded: true,
            testChartData: {
                labels: Array.from({ length: 32 }, (_, i) => i + ""),
                datasets: [
                    {
                        data: chartData,
                        pointBackgroundColor: "#059558",
                    },
                ],
            },
            testChartOptions: {
                responsive: true,
                plugins: {
                    title: {
                        display: false,
                        text: "Chart.js Line Chart - Cubic interpolation mode",
                    },
                    legend: {
                        display: false,
                    },
                },
                layout: {
                    padding: {
                        right: 11,
                    },
                },
                interaction: {
                    intersect: false,
                },
                elements: {
                    point: {
                        radius: 3,
                        backgroundColor: "#059558",
                        borderColor: "#059558",
                        fill: true,
                    },
                    line: {
                        borderColor: "#059558",
                        borderWidth: 1,
                        fill: true,
                    },
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: false,
                        },
                        ticks: {
                            beginAtZero: false,
                            callback: function (value, index, values) {
                                return index % 1 === 0 || values.length - 1 === index
                                    ? this.getLabelForValue(value)
                                    : null;
                            },
                            color: "#000C12",
                            min: "1",
                            max: "31",
                            maxRotation: 0,
                            font: {
                                size: "10px",
                                family: "Gilroy",
                            },
                            padding: -3,
                        },
                        grid: {
                            tickColor: "#fff",
                            borderColor: "#E0E8F0",
                        },
                    },
                    y: {    
                        display: true,
                        title: {
                            display: false,
                            text: "Value",
                        },
                        ticks: {
                            display: false,
                            stepSize: Math.max(...chartData) / 2,
                        },
                        grid: {
                            tickColor: "#fff",
                            borderColor: "#E0E8F0",
                        },
                    },
                },
            },
        };

我对这个配置有什么看法：

是否有将点和标签倾斜到图表中心而不使用此跳过选项的选项？或者有一些选项可以通过图表的配置添加填充？ 点的z指数。它们现在在网格下（或滴答声？）

---

网格的z索引将通过设置-1在options.scales.[x | y].grid.z处配置

        chartData.unshift(null);
        chartData.push(null);