How to customize charts with different color palettes and tooltips

[theWitchR]

Reproduction link

Steps to reproduce

I'm trying to customize the charts, but I could not find proper documentation.

I want to number format the tooltip as well.

This is what I tried:

  data: aggregateDataByYearAndQuarter('COLUMN'),
  xField: 'YEAR',
  yField: 'value',
  height: 400,
  padding: 'auto',
  colorField: 'QUARTER',
  stack: true,
  axis: {
    x:{
      title: 'Year',
    },
    y:{
      title: '$',
      labelFormatter: formatNumber
    }
  },
  tooltip: {
    title: (data) => `${data.YEAR}`,
    fields: ['QUARTER', 'value'],
    formatter: (data) => ({
      
      name: data.QUARTER,
      value: formatNumber(data.value),
    }),
    
    itemSorter: (a, b) => {
      const quarterOrder = { 'Q1': 1, 'Q2': 2, 'Q3': 3, 'Q4': 4 };
      return quarterOrder[a.name] - quarterOrder[b.name];
    },
  },
  legend: {
    position: 'top-right'
  },
  smooth: true,
  animation: {
    appear: {
      animation: 'path-in',
      duration: 800,
    },
  },
};```


Where can I find proper documentation for this?

### What is expected?

Change in color palette and formatting the numbers in the tooltip


### What is actually happening?

Nothing is happening

| Environment | Info |
| --- | --- |
| antd | 5.22.1 |
| React | 18.3.1 |
| System | Windows 10 |
| Browser | Edge |

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->