diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx index 26b836bf1..b0314a59b 100644 --- a/packages/visx-annotation/src/components/Label.tsx +++ b/packages/visx-annotation/src/components/Label.tsx @@ -120,20 +120,24 @@ export default function Label({ return { x: adjustedX, y: adjustedY }; }, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]); + const titleFontFamily = titleProps?.fontFamily; const titleStyle = useMemo( () => ({ fontSize: titleFontSize, fontWeight: titleFontWeight, + fontFamily: titleFontFamily, }), - [titleFontSize, titleFontWeight], + [titleFontSize, titleFontWeight, titleFontFamily], ) as React.CSSProperties; + const subtitleFontFamily = subtitleProps?.fontFamily; const subtitleStyle = useMemo( () => ({ fontSize: subtitleFontSize, fontWeight: subtitleFontWeight, + fontFamily: subtitleFontFamily, }), - [subtitleFontSize, subtitleFontWeight], + [subtitleFontSize, subtitleFontWeight, subtitleFontFamily], ) as React.CSSProperties; const anchorLineOrientation = Math.abs(dx) > Math.abs(dy) ? 'vertical' : 'horizontal'; @@ -177,7 +181,6 @@ export default function Label({ )} {title && ( | React.FC; /** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */ - dataKey: string; + dataKey?: string; /** Datum to annotate, used for Annotation positioning. */ datum: Datum; /** If dataKey is not specified, you must specify an xAccessor for datum. */ @@ -63,7 +63,8 @@ export default function BaseAnnotation< return null; } - const registryEntry = propsXAccessor && propsYAccessor ? null : dataRegistry?.get(dataKey); + const registryEntry = + (propsXAccessor && propsYAccessor) || dataKey == null ? null : dataRegistry?.get(dataKey); const xAccessor = propsXAccessor || registryEntry?.xAccessor; const yAccessor = propsYAccessor || registryEntry?.yAccessor;