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

[jiaulislam]

I'm trying to have my YAxis data as Percentage depending on the percentage ratio of dt & internet values. 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 & Labels as percentage but tooltip to show the actual value. Please help I'm new with Next.Js & Recharts.

Basically I'm trying to replicate a chart below made with Apex Chart

So far I made below with recharts

[
  { tradingDate: '27-Feb-2024', dt: 1804, internet: 3374 },
  { tradingDate: '28-Feb-2024', dt: 1608, internet: 3119 },
  { tradingDate: '29-Feb-2024', dt: 1927, internet: 3179 },
  { tradingDate: '03-Mar-2024', dt: 1854, internet: 3338 },
  { tradingDate: '04-Mar-2024', dt: 1511, internet: 2877 },
  { tradingDate: '05-Mar-2024', dt: 1447, internet: 2879 }
]

[jiaulislam]

My react component is as below

"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  LabelList,
} from "recharts";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

type StackChartPropType = {
  title: string;
  xDataKey: string;
  dataKeyA: string;
  dataKeyB: string;
  data: any[];
};

interface CustomizedLabelProps {
  x?: number;
  y?: number;
  fill?: string;
  value?: number;
}


type Props = {
  x: number;
  y: number;
  stroke: string;
  payload: CustomizedLabelProps;
};

const CustomizedAxisTick = ({ x, y, stroke, payload }: Props) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text
        x={0}
        y={0}
        dy={16}
        textAnchor="end"
        fill="#666"
        transform="rotate(-35)"
        fontSize={12}
      >
        {payload.value}
      </text>
    </g>
  );
};

const customLegendFormatter = (value: string) => {
  return value.toUpperCase();
};

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"
              // 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>
  );
};

export default StackBarChart;

[ckifer]

I would pre-compute your percentages, change the domain of your Y axis to be 0 to 100, and use the percentages as your data keys. At that point you can add the percent symbol to the y axis formatter and the label formatter.

On mobile else I could give code 😅

[jiaulislam]

@ckifer thanks for your reply. before posting the question I tried the same way but maybe I'm doing something stupid that's why its not working. It would be very helpful if you could give me a example code how to do this 🙏. Below gave some pre-computed data that I have done.

React Component

const ActiveTradingCodesBoard = async () => {
  const dayWiseSummary = await getClientTradeSummaryOfToday();
  const dayWiseData = await getDayWiseStatistics();

  const sanitizedDayWiseSummary = removeKeyFromObjects(
    dayWiseSummary,
    "TOTAL(DT + INTERNET)"
  );

  const transformDataa = transformData(dayWiseData);

  const totalDt = transformDataa.reduce((sum, item) => sum + item.dt, 0);
  const totalInternet = transformDataa.reduce(
    (sum, item) => sum + item.internet,
    0
  );

  const percentages = transformDataa.map((item) => ({
    tradingDate: item.tradingDate,
    dt: item.dt,
    internet: item.internet,
    dtRatio: Math.round((item.dt / totalDt) * 100),
    internetRatio: Math.round((item.internet / totalInternet) * 100),
  }));

  const yAxisValueSet = new Set();

  percentages.forEach((item) => {
    yAxisValueSet.add(item.dtRatio);
    yAxisValueSet.add(item.internetRatio);
  });

  return (
    <div className="mx-4">
      <PageHeader name="Active Trading Codes" showFilters={false} />
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-6 mt-2">
        {/* clients day wise */}
        <div className="rounded-md xl:col-span-3">
          <StackBarChart
            xDataKey="tradingDate"
            yDataKey="dtRatio"
            dataKeyA="dt"
            dataKeyB="internet"
            data={percentages}
            title="Clients (Day Wise)"
          />
        </div>
      </div>
    </div>
  );
};

export default ActiveTradingCodesBoard;

[
  {
    tradingDate: '27-Feb-2024',
    dt: 1804,
    internet: 3374,
    dtRatio: 18,
    internetRatio: 18
  },
  {
    tradingDate: '28-Feb-2024',
    dt: 1608,
    internet: 3119,
    dtRatio: 16,
    internetRatio: 17
  },
  {
    tradingDate: '29-Feb-2024',
    dt: 1927,
    internet: 3179,
    dtRatio: 19,
    internetRatio: 17
  },
  {
    tradingDate: '03-Mar-2024',
    dt: 1854,
    internet: 3338,
    dtRatio: 18,
    internetRatio: 18
  },
  {
    tradingDate: '04-Mar-2024',
    dt: 1511,
    internet: 2877,
    dtRatio: 15,
    internetRatio: 15
  },
  {
    tradingDate: '05-Mar-2024',
    dt: 1447,
    internet: 2879,
    dtRatio: 14,
    internetRatio: 15
  }
]

[ckifer]

Sure, it's late here but I'll take a stab at it tomorrow my time and make a sandbox 👍

[ckifer]

here you go

[jiaulislam]

thanks for your awsome help @ckifer . Really appreciate it. Just one thing On the tooltip I want the actual values to be shown not the ratio is it possible ?
again many many thanks for the help.

[ckifer]

You can make a custom tooltip

[jiaulislam]

You can make a custom tooltip

I can't thanks you enough 🙏. Love the community.