Tooltip - No Indicator Chart for React

ChartTooltipContent sets hideIndicator. The dots are omitted. The title, the series names, and the values stay. This demo doesn't set indicator, so the hidden shape would have been the default dot.

The label from config, Running or Swimming, and the value with toLocaleString, in font-mono and tabular-nums. nameKey isn't set, so the lookup uses the series key, running or swimming.

The raw date from XAxis, like 2024-07-16, because hideLabel is not set and there is no labelFormatter. The axis itself uses tickFormatter={formatWeekday}, a short weekday. tickMargin is 10.

ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is the second row. cursor={false} turns the hover cursor off. BarChart sets accessibilityLayer.

Both Bar components set stackId="a". Running is first, on the baseline, with radius={[0, 0, 4, 4]} and fill="var(--color-running)". Swimming is on top, with radius={[4, 4, 0, 0]} and fill="var(--color-swimming)".

config sets running to var(--chart-1) and swimming to var(--chart-2). ChartContainer writes --color-running and --color-swimming, and the bars' fill reads them. The tooltip names the series. The bars carry the color.