sparkline chart initially printed grids and lines before it rendered.

[st474ddr]

Like the gif, how could I replace the blank grids and lines?
Here was my sparkline config:

"chartOptions": {
    "chart": {
      "id": "sparkline1",
      "group": "sparklines",
      "type": "area",
      "height": 160,
      "toolbar": {
        "show": false
      },
      "sparkline": {
        "enabled": true
      }
    },
    "stroke": {
      "curve": "straight"
    },
    "fill": {
      "opacity": 1
    },
    "grid": {
      "show": false
    },
    "dataLabels": {
      "enabled": false
    },
    "labels": [
      "2021-09-01",
      "2021-09-02",
      "2021-09-03",
      "2021-09-04",
      "2021-09-05",
      "2021-09-06",
      "2021-09-07",
      "2021-09-08",
      "2021-09-09",
      "2021-09-10",
      "2021-09-11",
      "2021-09-12",
      "2021-09-13",
      "2021-09-14",
      "2021-09-15",
      "2021-09-16",
      "2021-09-17",
      "2021-09-18",
      "2021-09-19",
      "2021-09-20",
      "2021-09-21",
      "2021-09-22",
      "2021-09-23",
      "2021-09-24",
      "2021-09-25",
      "2021-09-26",
      "2021-09-27",
      "2021-09-28",
      "2021-09-29",
      "2021-09-30"
    ],
    "xaxis": {
      "type": "datetime",
      "tooltip": {
        "enabled": false
      }
    },
    "yaxis": {
      "show": false,
      "min": 0
    },
    "colors": ["#008FFB"]
  }

[st474ddr]

I have found the reason of the problem.
I put the config in json file too.
Therefore, the config will be loaded after the html render.