react-native-chart-kit/dist/v2/react-native/charts/line/defaultTooltip.js

Beautiful React Native charts for dashboards, reports, and data-rich mobile apps.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getFontFamilyProps } from "./text";
import { lineChartTooltipLineHeight } from "./tooltip";
export const renderDefaultTooltip = ({ config, height, series, width, x, xLabel, y }, renderer) => {
    if (renderer.capabilities?.text === false) {
        return null;
    }
    const contentX = x + config.padding;
    const labelY = y + config.padding + config.labelFontSize;
    const firstItemY = labelY + lineChartTooltipLineHeight;
    const hasShadow = config.shadowOpacity > 0;
    const { Circle, Group, Rect, Text } = renderer;
    return (_jsxs(Group, { children: [hasShadow ? (_jsx(Rect, { x: x + config.shadowOffsetX, y: y + config.shadowOffsetY, width: width, height: height, rx: config.borderRadius, fill: config.shadowColor, opacity: config.shadowOpacity })) : null, _jsx(Rect, { x: x, y: y, width: width, height: height, rx: config.borderRadius, fill: config.backgroundColor, stroke: config.borderColor, strokeOpacity: 0.2, strokeWidth: 1 }), _jsx(Text, { x: contentX, y: labelY, fill: config.labelColor, fontSize: config.labelFontSize, fontWeight: "600", text: xLabel, ...getFontFamilyProps(config.fontFamily), children: xLabel }), series.map((item, index) => {
                const itemY = firstItemY + index * lineChartTooltipLineHeight;
                return (_jsxs(Group, { children: [_jsx(Circle, { cx: contentX + 3, cy: itemY - config.fontSize * 0.32, r: 3, fill: item.color }), _jsx(Text, { x: contentX + 12, y: itemY, fill: config.textColor, fontSize: config.fontSize, text: `${item.label}: ${item.formattedValue}`, ...getFontFamilyProps(config.fontFamily), children: `${item.label}: ${item.formattedValue}` })] }, `tooltip-${item.key}`));
            })] }));
};