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'],