Tootltip doesnot contains all label.

[Peeyushmohapatra]

I have created a Component that takes a prop type of

type TOrgChargerInstSubsDataApiRespData = { monthAndYear: string; organizationChargersInstallationSubscriptionHistory: { numberOfChargers: number; installationSubscriptionName: string | null; numberOfActiveChargers: number; numberOfInactiveChargers: number; }[]; }

and show the chart based on the data. I wanted a stacked bar chart.

Bars are working properly but when i hover on a bar i am only able to see one label instead of multiple

this is the whole component code.

`"use client";

import { useEffect, useRef } from "react";
import { useParams } from "next/navigation";
import { ChartConfiguration, ChartData, ChartOptions } from "chart.js/auto";
import dayjs from "dayjs";
import { useForm } from "react-hook-form";

import { getDictionary } from "@/app/dictionaries";
import { SelectInput } from "@/components/formControls/SelectInput";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/Form";
import { useChart } from "@/hooks/useChart";
import { TOrgChargerInstSubsDataApiRespData } from "@/schema/organization/installationSchema";
import { TOptionType } from "@/typings";
import { BAR_CHART_COLORS } from "@/utils/constants";
import { createUniqueColorPicker, generateRandomColor } from "@/utils/helpers";

interface Props {
chargerInstSubsData: TOrgChargerInstSubsDataApiRespData[];
}

export function OrgChargerStatusDistributionChart({ chargerInstSubsData }: Props) {
const chartRef = useRef(null);
const { lang } = useParams();
const { common, glossary } = getDictionary(lang as string, ["common", "glossary"]);
const form = useForm<{
orgChargerStatusDistributionDataType: "allChargers" | "activeChargers" | "inactiveChargers";
}>({
defaultValues: {
orgChargerStatusDistributionDataType: "allChargers",
},
mode: "onChange",
});

const { watch } = form;
const inputValue = watch("orgChargerStatusDistributionDataType");

const chartOptions: ChartOptions<"bar"> = {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
		x: {
			stacked: true,
			ticks: {
				stepSize: 1,
			},
		},
		y: {
			stacked: true,
			ticks: {
				stepSize: 1,
			},
		},
	},
	plugins: {
		legend: {
			position: "bottom",
			labels: {
				boxWidth: 15,
				boxHeight: 15,
				padding: 20,
			},
		},
		title: {
			display: true,
			padding: {
				top: 0,
				bottom: 10,
			},
		},
		tooltip: {
			callbacks: {
				label: (context) => {
					const label = context.dataset.label || "";
					const value = context.parsed.y;
					console.log({ label, value });
					return `${label}: ${value.toLocaleString()}`;
				},
			},
		},
	},
	layout: {
		padding: {
			left: 10,
			right: 10,
			top: 0,
			bottom: 0,
		},
	},
};

const chartConfig: ChartConfiguration<"bar", number[], string> = {
	type: "bar",
	data: {
		labels: [],
		datasets: [],
	},
	options: chartOptions,
};

const chartInstanceRef = useChart(chartRef, chartConfig, "");

useEffect(() => {
	if (chartInstanceRef.current) {
		const subscriptions = Array.from(
			new Set(
				chargerInstSubsData.flatMap((month) =>
					month.organizationChargersInstallationSubscriptionHistory.map(
						(sub) => sub.installationSubscriptionName
					)
				)
			)
		);

		const pickUniqueColor = createUniqueColorPicker(BAR_CHART_COLORS);

		const chartData: ChartData<"bar", number[], string> = {
			labels: chargerInstSubsData.map((entry) =>
				getLocaleDateFormat(lang.toString(), dayjs(entry.monthAndYear).toString(), "MMM YY")
			),
			datasets: subscriptions.map((subscription) => {
				const barColor = pickUniqueColor() || generateRandomColor();

				return {
					label: subscription || "NA",
					data: chargerInstSubsData.map((month) => {
						const sub = month.organizationChargersInstallationSubscriptionHistory.find(
							(s) => s.installationSubscriptionName === subscription
						);
						return sub
							? inputValue === "allChargers"
								? sub.numberOfChargers
								: inputValue === "activeChargers"
								? sub.numberOfActiveChargers
								: sub.numberOfInactiveChargers
							: 0;
					}),
					stack: "stack1",
					borderRadius: 8,
					backgroundColor: barColor,
				};
			}),
		};

		chartInstanceRef.current.data = chartData;
		chartInstanceRef.current.update();
	}
}, [inputValue, chargerInstSubsData, chartInstanceRef, lang]);

const DATA_TYPE_OPTIONS = [
	{ value: "allChargers", label: common("all") as string },
	{ value: "activeChargers", label: common("active") as string },
	{ value: "inactiveChargers", label: common("inactive") as string },
];

return (
	<Card className="h-full bg-white">
		<CardHeader className="flex flex-row justify-between items-center gap-10">
			<CardTitle className="text-md truncate">
				{glossary("form_labels_charger_comparison_monthly")}
			</CardTitle>
			<Form {...form}>
				<form
					className="flex max-lg:justify-end max-md:flex-col gap-6 md:items-center items-end"
					noValidate
				>
					<FormField
						control={form.control}
						name="orgChargerStatusDistributionDataType"
						render={({ field }) => (
							<FormItem className="flex-1 focus:ring-0 focus:ring-transparent">
								<FormControl>
									<SelectInput
										value={
											DATA_TYPE_OPTIONS.find((option) => option.value === field.value) ||
											DATA_TYPE_OPTIONS[0].value
										} // Default to first option
										options={DATA_TYPE_OPTIONS}
										isSearchable={false}
										placeholder={common("select") as string}
										onBlur={() => {
											if (!field.value) {
												field.onChange("allChargers"); // Revert to default on blur if no value
											}
										}}
										name={field.name}
										onChange={(newValue) => {
											const option = newValue as TOptionType;
											field.onChange(option?.value || "allChargers");
										}}
										className="min-w-52"
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>
				</form>
			</Form>
		</CardHeader>
		<CardContent className="h-[40vh] py-5">
			{chargerInstSubsData.length === 0 ? (
				<div className="flex flex-col justify-center items-center size-full gap-8 py-6 bg-white rounded-sm">
					{/* <NoDataAvailableIllustration className="lg:max-w-56 lg:max-h-56 max-sm:w-[150px]" />
        <Text className="font-semibold text-center text-lg max-sm:text-[16px] sm:w-2/3">
          {glossary("helper_text_no_data_available")}
        </Text> */}
				</div>
			) : (
				<canvas ref={chartRef} />
			)}
		</CardContent>
	</Card>
);

}
`

the tooltip should contains data like this

[kokoc30]

Add interaction.mode: "index" to your chartOptions. The default is "nearest", which selects the nearest bar segment; stacking the bars doesn't automatically select every dataset for the tooltip.

const chartOptions: ChartOptions<"bar"> = {
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: "index",
    axis: "x",
    intersect: false,
  },
  // Keep your existing scales, plugins, and layout here.
};

Keep your existing plugins.tooltip.callbacks.label callback unchanged. It formats one selected tooltip item at a time; it doesn't decide which datasets are selected. With index mode, it will be called for the items at that month's index across the visible datasets.

This fits your data construction: every subscription's data array is built by mapping the same chargerInstSubsData months, with zero inserted when a subscription is missing. The corresponding month therefore has the same array index in each dataset.

intersect: false also lets the tooltip appear when the pointer is near the column, without hitting a particular segment. If you only want to change tooltip selection and leave ordinary hover behavior alone, put mode: "index", axis: "x", intersect: false inside your existing plugins.tooltip object instead.

References: index interaction mode, tooltip selection options.