Tooltip - Line Indicator Chart for React

ChartTooltipContent sets indicator="line". That is a narrow bar, w-1, painted with the series color, beside Running and Swimming. The default is dot, a size-2.5 swatch. The same prop accepts dashed.

The indicator uses the series color. config sets running to var(--chart-1) and swimming to var(--chart-2), and the bars fill var(--color-running) and var(--color-swimming). The row name is the label from config.

Yes. This demo doesn't set hideLabel, so the title is the raw date, like 2024-07-16. XAxis shows a short weekday through tickFormatter={formatWeekday}. The rows under the title are the two series and their values.

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

Set hideIndicator on ChartTooltipContent. The title, the label from config, and the value stay. This demo sets indicator and leaves hideIndicator off.

Both Bar components set stackId="a". Running is first, on the baseline, with radius={[0, 0, 4, 4]}. Swimming is on top, with radius={[4, 4, 0, 0]}. The tooltip lists both, each with its own line indicator.