How to have YAxis Tick Custom Value based on the Bar Data Sets?

Question

I'm trying to have my YAxis data as Percentage depending on the percentage ratio of dt & internet values of each bar. Also the each bar stacked data has the percentage but on hover tooltip need to show actual data like dt=1804 and internet 3374. How do I get the YAxis Ticks & Bard Labels as percentage but Tooltip to show the actual value.

basically I'm trying to build chart as below with recharts

But So Far I made this

const StackBarChart = ({
  title,
  xDataKey,
  dataKeyA,
  dataKeyB,
  data,
}: StackChartPropType) => {
  const TICK_COLOR = "#C7C7C7";
  return (
    <Card className="bg-gradient-to-tl from-gray-50 to-slate-100">
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={260}>
          <BarChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey={xDataKey}
              angle={-30}
              textAnchor="end"
              height={70}
              tick={<CustomizedAxisTick />}
              tickLine={true}
            />
            <YAxis
              tick={{ stroke: TICK_COLOR, strokeOpacity: 0.1, fontSize: 12 }}
              tickLine={true}
              type="number"
              includeHidden 
              // tickFormatter={(value) => `${value}%`}
              // domain={[0, 100]}
            />
            <Tooltip />
            <Legend formatter={customLegendFormatter} />
            <Bar dataKey={dataKeyA} stackId="a" fill="#8884d8">
              <LabelList
                dataKey={dataKeyA}
                position="insideStart"
                // formatter={(value: number) => `${value}%`}
              />
            </Bar>
            <Bar dataKey={dataKeyB} stackId="a" fill="#82ca9d">
              <LabelList
                dataKey={dataKeyB}
                position="insideTop"
                // formatter={(value: number) => `${value}%`}
              />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
};

Answer 1

Issue has been asked also in the Github repo. There the full conversation can be found and the solution.

https://github.com/recharts/recharts/discussions/4268