From 9e79b4331216d17cfb2d079257fce617d6a52939 Mon Sep 17 00:00:00 2001
From: Daniel Abdelsamed <dabdelsamed@tma.thk.com>
Date: Fri, 1 Jul 2022 09:00:50 -0400
Subject: [PATCH] feat: assure redraw occurs when type changes (#1054)

---
 src/chart.tsx       |  7 +++++++
 test/chart.test.tsx | 14 ++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/chart.tsx b/src/chart.tsx
index daa7c8428..0829f30bf 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -87,6 +87,13 @@ function ChartComponent<
     }
   }, [redraw, options, data.labels, data.datasets, updateMode]);
 
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    destroyChart();
+    setTimeout(renderChart);
+  }, [type]);
+
   useEffect(() => {
     renderChart();
 
diff --git a/test/chart.test.tsx b/test/chart.test.tsx
index 646f35e68..c843493c4 100644
--- a/test/chart.test.tsx
+++ b/test/chart.test.tsx
@@ -108,6 +108,20 @@ describe('<Chart />', () => {
     expect(chart.id).toEqual(id);
   });
 
+  it('should properly update with a new chart type', () => {
+    const newType = 'line';
+
+    const { rerender } = render(
+      <Chart data={data} options={options} type='bar' ref={ref} />
+    );
+
+    const originalChartDestroy = Object.assign({}, destroy);
+
+    rerender(<Chart data={data} options={options} type={newType} ref={ref} />);
+
+    expect(originalChartDestroy).toHaveBeenCalled();
+  });
+
   it('should properly maintain order with new data', () => {
     const oldData = {
       labels: ['red', 'blue'],