How to show label on X axis

[CornerSyrup]

Hi, I'm using the bar chart and wondering how to use the X formatter...

It doesn't show all label in the official doc as shown below,

and showing extra label in my app as below.

I have no idea how x-formatter supposed to work and end up with this

const data = ref<{ name: string; balance: number }[]>([]);

const xFormatter: (tick: number | Date, i: number, ticks: number[] | Date[]) => string = (t, i, ts) =>
  data.value[t as number]?.name;

<bar-chart
  :data="data"
  index="name"
  :categories="['balance']"
  :y-formatter="(tick) => `$ ${new Intl.NumberFormat('hk').format(tick as number).toString()}`"
  :x-formatter="xFormatter"
/>

How do I show all labels and not showing the weird number in the middle?