feat: assure redraw occurs when type changes (#1054) (#1055)

reactchartjs · Jul 12, 2022 · bf0538f · bf0538f
1 parent 9ce951c
commit bf0538f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git 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
@@ -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'],