From ae4098ea1295defa1d2a4957242627d0a83123e2 Mon Sep 17 00:00:00 2001
From: Ivan Tsenilov <arantirex@gmail.com>
Date: Sun, 22 May 2022 13:16:27 +0300
Subject: [PATCH 1/2] feat: implement passing updateMode property to chart's
 update method

---
 src/chart.tsx       |  3 ++-
 src/types.ts        |  6 ++++++
 test/chart.test.tsx | 30 ++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index 08df13418..284781796 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -26,6 +26,7 @@ function ChartComponent<
     options,
     plugins = [],
     fallbackContent,
+    updateMode,
     ...props
   }: ChartProps<TType, TData, TLabel>,
   ref: ForwardedRef<ChartJS<TType, TData, TLabel>>
@@ -82,7 +83,7 @@ function ChartComponent<
       destroyChart();
       setTimeout(renderChart);
     } else {
-      chartRef.current.update();
+      chartRef.current.update(updateMode);
     }
   }, [redraw, options, data.labels, data.datasets]);
 
diff --git a/src/types.ts b/src/types.ts
index 36f9eeeb2..cefa693d2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,6 +6,7 @@ import type {
   ChartOptions,
   DefaultDataPoint,
   Plugin,
+  UpdateMode,
 } from 'chart.js';
 
 export type ForwardedRef<T> =
@@ -56,6 +57,11 @@ export interface ChartProps<
    * @todo Replace with `children` prop.
    */
   fallbackContent?: ReactNode;
+  /**
+   * A mode string to indicate transition configuration should be used.
+   * @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
+   */
+  updateMode?: UpdateMode;
 }
 
 /**
diff --git a/test/chart.test.tsx b/test/chart.test.tsx
index e28c910d0..646f35e68 100644
--- a/test/chart.test.tsx
+++ b/test/chart.test.tsx
@@ -386,4 +386,34 @@ describe('<Chart />', () => {
     expect(prevDataset1).toBe(nextDataset1);
     expect(prevDataset2).toBe(nextDataset2);
   });
+
+  it('should pass updateMode prop to update method', () => {
+    const newData = {
+      labels: ['purple', 'pink'],
+      datasets: [{ label: 'new-colors', data: [1, 10] }],
+    };
+
+    const { rerender } = render(
+      <Chart
+        data={data}
+        options={options}
+        type='bar'
+        updateMode='active'
+        ref={ref}
+      />
+    );
+
+    rerender(
+      <Chart
+        data={newData}
+        options={options}
+        type='bar'
+        updateMode='active'
+        ref={ref}
+      />
+    );
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(update).toBeCalledWith('active');
+  });
 });

From 80a56b36c805a53d9e48ffa522c9775046df03ff Mon Sep 17 00:00:00 2001
From: Ivan Tsenilov <arantirex@gmail.com>
Date: Mon, 23 May 2022 12:36:55 +0300
Subject: [PATCH 2/2] fix: add updateMode to useEffect's dependency array

---
 src/chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index 284781796..daa7c8428 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -85,7 +85,7 @@ function ChartComponent<
     } else {
       chartRef.current.update(updateMode);
     }
-  }, [redraw, options, data.labels, data.datasets]);
+  }, [redraw, options, data.labels, data.datasets, updateMode]);
 
   useEffect(() => {
     renderChart();