Implement a Tooltip (SkiaText) Inside a Card-Like Container

[gspsteve]

I'm working with Victory Native XL and trying to implement a custom tooltip (ActiveValueIndicator) using SkiaText from @shopify/react-native-skia. The goal is to display the value inside a card-like container (similar to a Paper.Card look) when interacting with the chart.

I currently have this working with SkiaText, but I'm struggling to style it like a card with background color, rounded corners, and padding. I understand that using Skia components is necessary, but I'm unsure how to replicate the card effect effectively.

My current implemeantion:

const ActiveValueIndicator = ({
  xPosition,
  yPosition,
  top,
  bottom,
  activeValue,
  textColor,
  lineColor,
  indicatorColor,
  topOffset = 0,
  prefix = "",
  suffix = "",
  decimalPlaces = 2,
  index = 0,
}) => {
  const FONT_SIZE = 16;
  const LINE_SPACING = FONT_SIZE + 4;
  const themeColors = useTheme();
  const font = useFont(inter, FONT_SIZE);
  const start = useDerivedValue(() => vec(xPosition.value, bottom));
  const end = useDerivedValue(() =>
    vec(xPosition.value, top + 1.5 * FONT_SIZE + topOffset)
  );

  const activeValueDisplay = useDerivedValue(
    () => `${prefix} ${activeValue.value.toFixed(decimalPlaces)} ${suffix}`
  );
  const activeValueWidth = useDerivedValue(
    () => font?.measureText(activeValueDisplay.value).width || 0
  );
  const activeValueX = useDerivedValue(
    () => xPosition.value - activeValueWidth.value / 2
  );

  return (
    <>
      <SkiaLine p1={start} p2={end} color={lineColor} strokeWidth={2} />
      <Circle cx={xPosition} cy={yPosition} r={4} color={indicatorColor} />
      <Circle
        cx={xPosition}
        cy={yPosition}
        r={3}
        color={themeColors.colors.onBackground}
      />
      <SkiaText
        color={textColor}
        font={font}
        text={activeValueDisplay}
        x={activeValueX}
        //y={top + FONT_SIZE + topOffset + index * LINE_SPACING} // Dynamic offset
        y={top - FONT_SIZE - topOffset - index * LINE_SPACING}
      />
    </>
  );
};

<CartesianChart
            data={chartData}
            xKey="x"
            yKeys={yKeys}
            padding={{ top: 50, bottom: 15, left: 15, right: 15 }}
            chartPressState={[firstTouch]}
            xAxis={{
              font: robotoLightFont,
              labelColor: labelColor,
              labelOffset: 0,
              tickCount: 5,
              axisSide: "bottom",
              lineColor: "transparent",
              labelPosition: "inset",
              formatXLabel: (value) => formatXLabel(value),
            }}
            yAxis={[
              {
                font: robotoLightFont,
                labelColor: labelColor,
                labelOffset: 5,
                //tickCount: 5,
                axisSide: "left",
                lineColor: themeColors.colors.text,
                labelPosition: "outset",
                formatYLabel: (value) => `${Math.round(value)}`,
                domain: [0, maxYValue],
                tickValues: tickValues,
              },
            ]}
            domainPadding={10}
            renderOutside={({ chartBounds, points }) => (
              <>
                {isFirstPressActive &&
                  yKeys.map((key, index) => {
                    const config = yAxisConfig[key] || {};
                    return (
                      <ActiveValueIndicator
                        key={`indicator-${key}`}
                        xPosition={firstTouch.x.position}
                        yPosition={firstTouch.y[key]?.position ?? 0}
                        activeValue={firstTouch.y[key]?.value ?? 0}
                        bottom={chartBounds.bottom}
                        top={chartBounds.top}
                        textColor={labelColor}
                        lineColor={lineColor}
                        indicatorColor={config.color || "#000"} // Dynamic color
                        prefix={config.prefix || ""}
                        suffix={config.suffix || ""}
                        decimalPlaces={config.decimalPlaces ?? 2} // Dynamic decimals
                        index={index}
                      />
                    );
                  })}
              </>
            )}
          />

[keithluchtel]

@gspsteve I'd looking into using some of the shapes and Shadow effects within Skia

https://shopify.github.io/react-native-skia/docs/shapes/polygons
https://shopify.github.io/react-native-skia/docs/image-filters/shadows

Moving to a discussion as this isn't an issue with victory native

[gspsteve]

OK thanks to moving into to a discussion, so has anyone already implemented a card like style for the "Tooltip"?

[risardi-lahelu]

I think you can build simple tooltip using react-native-reanimated and clamp function outside the Victory Native it-self, since it's hard to style

How it works:

1. You need to figure out how big the container is (width & height)
2. You need to figure out how big the tooltip is (width & height)

after you figure out, you need to make a "clamp" function that will return the value of x between range you want

const clamp = (value: number, min: number, max: number): number => {
  'worklet';

  return Math.min(Math.max(value, min), max);
};

full code:

import { Circle, Paint, useFont } from '@shopify/react-native-skia';
import { useCallback } from 'react';
import { LayoutChangeEvent, LayoutRectangle, View } from 'react-native';
import AnimateableText from 'react-native-animateable-text';
import Animated, { SharedValue, useAnimatedProps, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { CartesianChart, Line, useChartPressState } from 'victory-native';
import { Text } from '@/components/library';
import roboto from '../../../../assets/fonts/Roboto.ttf';
import SpaceCard from '../SpaceCard';

const data = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random()
}));

interface IToolTipProps {
  x: SharedValue<number>;
  y: SharedValue<number>;
  mainColor?: string;
  strokeColor?: string;
}
const TOOL_TIP_WIDTH = 6;
const TOOL_TIP_STROKE = 8;
const ToolTip = ({ x, y, mainColor = 'black', strokeColor = 'white' }: IToolTipProps) => {
  return (
    <Circle cx={x} cy={y} r={TOOL_TIP_WIDTH} color={mainColor}>
      {/* eslint-disable-next-line react/style-prop-object */}
      <Paint color={strokeColor} style="stroke" strokeWidth={TOOL_TIP_STROKE} />
    </Circle>
  );
};
const clamp = (value: number, min: number, max: number): number => {
  'worklet';

  return Math.min(Math.max(value, min), max);
};

const defaultRectangle: LayoutRectangle = {
  width: 0,
  height: 0,
  x: 0,
  y: 0
};
const LineViewNative = () => {
  const font = useFont(roboto, 12);
  const { state } = useChartPressState({ x: 0, y: { highTmp: 0 } });
  const layoutContainer = useSharedValue<LayoutRectangle>(defaultRectangle);
  const layoutToolTip = useSharedValue<LayoutRectangle>(defaultRectangle);

  const handleLayoutContainer = useCallback((event: LayoutChangeEvent) => {
    layoutContainer.value = event.nativeEvent.layout;
  }, []);

  const handleLayoutToolTip = useCallback((event: LayoutChangeEvent) => {
    layoutToolTip.value = event.nativeEvent.layout;
  }, []);

  const animatedText = useAnimatedProps(() => {
    return {
      text: `x:${state.x.position.value}`
    };
  });

  const animatedTooltip = useAnimatedStyle(() => ({
    opacity: 1,
    position: 'absolute',
    top: clamp(0, layoutContainer.value.height - layoutToolTip.value.height, state.y.highTmp.position.value),
    transform: [
      { translateX: clamp(0, layoutContainer.value.width - layoutToolTip.value.width, state.x.position.value) }
    ]
  }));

  return (
    <>
      <AnimateableText animatedProps={animatedText} />
      <SpaceCard>
        <View style={{ minHeight: 250 }} onLayout={handleLayoutContainer}>
          <CartesianChart
            data={data}
            xKey="day"
            yKeys={['highTmp']}
            domainPadding={10}
            chartPressState={state}
            yAxis={[
              {
                font,
                axisSide: 'right',
                tickCount: 3,
                lineWidth: 0
              }
            ]}
            xAxis={{ font, tickCount: 2, enableRescaling: true }}
            padding={0}
          >
            {({ points }) => (
              <>
                <Line points={points.highTmp} color="red" strokeWidth={3} />
                <ToolTip x={state.x.position} y={state.y.highTmp.position} />
              </>
            )}
          </CartesianChart>
          <Animated.View
            style={[animatedTooltip, { backgroundColor: 'red', padding: 10, borderRadius: 5 }]}
            onLayout={handleLayoutToolTip}
          >
            <Text>Floating</Text>
          </Animated.View>
        </View>
      </SpaceCard>
    </>
  );
};

export default LineViewNative;