diff --git a/app/client/src/widgets/ChartWidget/component/index.test.tsx b/app/client/src/widgets/ChartWidget/component/index.test.tsx
index 44508d49ad..b0b0ac87c7 100644
--- a/app/client/src/widgets/ChartWidget/component/index.test.tsx
+++ b/app/client/src/widgets/ChartWidget/component/index.test.tsx
@@ -96,7 +96,54 @@ describe("Chart Widget", () => {
expect(fusionContainer).toBeInTheDocument();
});
- it("2. adds a click event when user adds a click callback", async () => {
+ it("2. successfully switches sequence of basic chart/custom fusion chart/basic chart", async () => {
+ // First render with Area Chart
+ let props = JSON.parse(JSON.stringify(defaultProps));
+ props.chartType = "AREA_CHART";
+
+ const { container, getByText, rerender } = render(
+ ,
+ );
+
+ let xAxisLabel = getByText("xaxisname");
+ expect(xAxisLabel).toBeInTheDocument();
+
+ let echartsContainer = container.querySelector("#widgetIDechart-container");
+ expect(echartsContainer).toBeInTheDocument();
+
+ let fusionContainer = container.querySelector(
+ "#widgetIDcustom-fusion-chart-container",
+ );
+ expect(fusionContainer).not.toBeInTheDocument();
+
+ // Second render with fusion charts
+ props = JSON.parse(JSON.stringify(defaultProps));
+ props.chartType = "CUSTOM_FUSION_CHART";
+
+ rerender();
+
+ echartsContainer = container.querySelector("#widgetIDechart-container");
+ expect(echartsContainer).not.toBeInTheDocument();
+
+ fusionContainer = container.querySelector(
+ "#widgetIDcustom-fusion-chart-container",
+ );
+ expect(fusionContainer).toBeInTheDocument();
+
+ // Third render with Area charts again.
+ props = JSON.parse(JSON.stringify(defaultProps));
+ props.chartType = "AREA_CHART";
+
+ rerender();
+
+ xAxisLabel = getByText("xaxisname");
+ expect(xAxisLabel).toBeInTheDocument();
+
+ echartsContainer = container.querySelector("#widgetIDechart-container");
+ expect(echartsContainer).toBeInTheDocument();
+ });
+
+ it("3. adds a click event when user adds a click callback", async () => {
const mockCallback = jest.fn();
const props = { ...defaultProps };
props.onDataPointClick = (point) => {
diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx
index 3b98b9599f..7117ba0aa4 100644
--- a/app/client/src/widgets/ChartWidget/component/index.tsx
+++ b/app/client/src/widgets/ChartWidget/component/index.tsx
@@ -251,6 +251,7 @@ class ChartComponent extends React.Component<
this.props.chartType == "CUSTOM_FUSION_CHART" &&
this.state.chartType != "CUSTOM_FUSION_CHART"
) {
+ this.echartConfiguration = {};
this.setState({
eChartsError: undefined,
chartType: "CUSTOM_FUSION_CHART",