Individual labels for grouped stacked charts with slider

[larapalagyi]

Hi,
I use @ant-design/plots in my react app. How can i display total values on top of individual columns of a grouped stacked chart?
so instead of the values of each stack i would like to display the total on top.

Also is it possible to add sub x axis label under the grouped columns, so i would know which column is which without the tooltip?
Something like this would be my goal:

An other thing, why is the highlight on hover is just under those columns of the group that has value, and not the whole group?

I tried using this: https://ant-design-charts-v1.antgroup.com/en/examples/plugin/multi-view/#sales-analysis, but it doesnt support slider, so if i have multiple grouped columns it doesn't have enough place to display.
Can someone please help, if these things can be made in ant-charts?

Thank you

[lxfu1]

import { Column } from '@ant-design/plots';
import { forEach, groupBy } from 'lodash';
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom';

const DemoColumn = () => {
  const [data, setData] = useState([]);
  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

  useEffect(() => {
    asyncFetch();
  }, []);
  
  const annotations = [];
  const DOMAIN_MAX = 30
  forEach(groupBy(data, 'year'), (values, k) => {
    const value = values.reduce((a, b) => a + b.value, 0);
    annotations.push({
      type: 'text',
      data: [k, DOMAIN_MAX],
      xField: 'year',
      yField: 30, 
      style: {
        text: `${value}`,
        textAlign: 'center',
      },
      tooltip: false,
    });
  });
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    stack: true,
    colorField: 'type',
    scale: {
      y: {
        domainMax: DOMAIN_MAX
      }
    },
    annotations,
  };
  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoColumn />);