Ant design charts, how to display data with duplicate name in column chart

Question

I have an array of objects that looks like this

 [{type: 'apples', sales: 52},
  {type: 'apples', sales: 62},
  {type: 'apples', sales: 72}]

I want to build a column chart from Ant Design Charts with this data but instead of 3 columns, I have only one.
I don't see how to make it display each record separately.

Here is a code https://codesandbox.io/s/goofy-wind-i06ul?file=/App.tsx

Thank you for your help!

Answer 1

just need to add:

isStack: true,

var config = { data: data, xField: "type", yField: "sales", isStack: true, xAxis: { label: { autoHide: true, autoRotate: false } } };