diff --git a/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.test.ts b/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.test.ts
index 2f850f0801..02354e0d72 100644
--- a/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.test.ts
+++ b/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.test.ts
@@ -245,14 +245,14 @@ describe("EChartsConfigurationBuilder", () => {
           },
         },
         {
-          top: 265,
-          left: "33.333333333333336%",
+          top: 80,
+          left: 495,
           textAlign: "center",
           text: "series1",
         },
         {
-          top: 265,
-          left: "66.66666666666667%",
+          top: 80,
+          left: 495,
           textAlign: "center",
           text: "series2",
         },
@@ -484,8 +484,8 @@ describe("EChartsConfigurationBuilder", () => {
       expectedConfig.series = [
         {
           type: "pie",
-          radius: "60%",
-          center: ["50%", "60%"],
+          top: 100,
+          bottom: 30,
           name: "series1",
           encode: {
             itemName: "Category",
diff --git a/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.ts b/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.ts
index 933d15d0ad..26600e47b1 100644
--- a/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.ts
+++ b/app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.ts
@@ -17,6 +17,7 @@ export class EChartsConfigurationBuilder {
     seriesID: string,
     seriesData: ChartData,
     showDataPointLabel: boolean,
+    layoutConfig: Record<string, Record<string, unknown>>,
   ) {
     let seriesName = messages.Undefined;
     if (seriesData.seriesName && seriesData.seriesName.length > 0) {
@@ -25,8 +26,8 @@ export class EChartsConfigurationBuilder {
 
     const config = {
       type: "pie",
-      radius: "60%",
-      center: ["50%", "60%"],
+      top: layoutConfig.grid.top,
+      bottom: layoutConfig.grid.bottom,
       name: seriesName,
       label: {
         show: showDataPointLabel,
@@ -46,6 +47,7 @@ export class EChartsConfigurationBuilder {
   #seriesConfigForChart(
     props: ChartComponentProps,
     allSeriesData: AllChartData,
+    layoutConfig: Record<string, Record<string, unknown>>,
   ) {
     /**
      * {
@@ -98,6 +100,7 @@ export class EChartsConfigurationBuilder {
             seriesID,
             seriesData,
             props.showDataPointLabel,
+            layoutConfig,
           );
           break;
       }
@@ -118,16 +121,13 @@ export class EChartsConfigurationBuilder {
   #titleConfigForPiechart(
     props: ChartComponentProps,
     allSeriesData: AllChartData,
+    layoutConfig: Record<string, Record<string, unknown>>,
   ) {
     const config: Record<string, unknown>[] = [];
-    const numSeries = Object.keys(allSeriesData).length;
-    const interval = 100 / (numSeries + 1);
-
-    Object.values(allSeriesData).forEach((seriesData, index) => {
-      const offset = `${(index + 1) * interval}%`;
+    Object.values(allSeriesData).forEach((seriesData) => {
       config.push({
-        top: this.seriesTitleOffsetForPieChart(props),
-        left: offset,
+        top: (layoutConfig.grid.top as number) - 20,
+        left: props.dimensions.componentWidth / 2 - 5,
         textAlign: "center",
         text: seriesData.seriesName ?? "",
       });
@@ -172,7 +172,7 @@ export class EChartsConfigurationBuilder {
     if (props.chartType == "PIE_CHART") {
       return [
         defaultTitleConfig,
-        ...this.#titleConfigForPiechart(props, allSeriesData),
+        ...this.#titleConfigForPiechart(props, allSeriesData, layoutConfig),
       ];
     } else {
       return defaultTitleConfig;
@@ -350,7 +350,11 @@ export class EChartsConfigurationBuilder {
     chartConfig.yAxis = this.#yAxisConfig(props, layoutConfig);
 
     chartConfig.dataZoom = this.#scrollConfig(props, layoutConfig);
-    chartConfig.series = this.#seriesConfigForChart(props, allSeriesData);
+    chartConfig.series = this.#seriesConfigForChart(
+      props,
+      allSeriesData,
+      layoutConfig,
+    );
     return chartConfig;
   }
 }