From d5c1d53e259f2b09d0d2abf7c51f083fe07bd310 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Mon, 4 Jan 2021 18:24:29 -0800
Subject: [PATCH 1/2] fix(annotation/Label): fix doc types, add default
 anchorLineStroke, fix object padding

---
 packages/visx-annotation/src/components/Label.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx
index 465e01b58..26b836bf1 100644
--- a/packages/visx-annotation/src/components/Label.tsx
+++ b/packages/visx-annotation/src/components/Label.tsx
@@ -61,11 +61,11 @@ function getCompletePadding(padding: LabelProps['backgroundPadding']) {
   if (typeof padding === 'number') {
     return { top: padding, right: padding, bottom: padding, left: padding };
   }
-  return { ...DEFAULT_PADDING, padding };
+  return { ...DEFAULT_PADDING, ...padding };
 }
 
-export default function AnnotationLabel({
-  anchorLineStroke,
+export default function Label({
+  anchorLineStroke = '#222',
   backgroundFill = '#eaeaea',
   backgroundPadding,
   backgroundProps,

From 44a5e95dc4d10a671cc41c9cc0ff0301652a793a Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Wed, 6 Jan 2021 11:46:38 -0800
Subject: [PATCH 2/2] fix(demo/annotation): update position on scale changes

---
 .../src/sandboxes/visx-annotation/ExampleControls.tsx  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx
index d68ac47aa..c555269dc 100644
--- a/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/label-has-associated-control: 'off', @typescript-eslint/no-explicit-any: 'off' */
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
 import { PickD3Scale, scaleTime, scaleLinear } from '@visx/scale';
 import { extent } from 'd3-array';
@@ -86,6 +86,14 @@ export default function ExampleControls({
     dx: compact ? -50 : -100,
     dy: compact ? -30 : -50,
   });
+  // update annotation position when scale's change
+  useEffect(() => {
+    setAnnotationPosition(currPosition => ({
+      ...currPosition,
+      x: xScale(getDate(annotateDatum)) ?? 0,
+      y: yScale(getStockValue(annotateDatum)) ?? 0,
+    }));
+  }, [xScale, yScale]);
 
   return (
     <>