G2Plot chart stack wrong column

Question

EDIT: add a snippet, code below:

<div id="app"></div>
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
<script>
  const plot = new G2Plot.Column(document.getElementById('app'), {
        data: [
            {
                day: 9,
                amount: 11104.37
            },
            {
                day: 10,
                amount: 11244.82
            },
            {
                day: 11,
                amount: 10286.14
            },
            {
                day: 12,
                amount: 7485.57
            },
            {
                day: 1,
                amount: 9274.57
            },
            {
                day: 2,
                amount: 8899.95
            }
        ],
        xField: 'day',
        yField: 'amount'
    });
  plot.render();
</script>

I tried to use G2Plot by Ant but i encountered some problems. My goal is to display a column chart.

here is my G2Plot config :

const columnPlotConfig = {
    data: [
        {
            day: 9,
            amount: 11104.37
        },
        {
            day: 10,
            amount: 11244.82
        },
        {
            day: 11,
            amount: 10286.14
        },
        {
            day: 12,
            amount: 7485.57
        },
        {
            day: 1,
            amount: 9274.57
        },
        {
            day: 2,
            amount: 8899.95
        }
    ],
    xField: 'day',
    yField: 'amount'
};

But some data columns get stacked on each other and leave their "places" empty (see screenshot below)

here is the doc

Answer 1

I find that the xField needs string values

<div id="app"></div>
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
<script>
  const plot = new G2Plot.Column(document.getElementById('app'), {
  data: [
   {
    day: "9",
    amount: 11104.37
   },
   {
    day: "10",
    amount: 11244.82
   },
   {
    day: "11",
    amount: 10286.14
   },
   {
    day: "12",
    amount: 7485.57
   },
   {
    day: "1",
    amount: 9274.57
   },
   {
    day: "2",
    amount: 8899.95
   }
  ],
  xField: 'day',
  yField: 'amount'
 });
  plot.render();
</script>