diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 366cda74..3c0f3aa9 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -14,3 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { LegendOptions } from "@/types/dashboard";
+
+export default function useLegendProcess() {
+  function showEchartsLegend(keys: string[], legend?: LegendOptions) {
+    if (keys.length === 1) {
+      return false;
+    }
+    if (legend && legend.asTable) {
+      return false;
+    }
+    return true;
+  }
+  return { showEchartsLegend };
+}
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index f22f2ce6..9d76c5e6 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -14,14 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">{{ t("legendOptions") }}</span>
-    <span class="title mr-5">{{ t("asTable") }}</span>
+    <span class="label mr-5">{{ t("asTable") }}</span>
     <el-switch
       v-model="legend.asTable"
       active-text="Yes"
       inactive-text="No"
       @change="updateLegendConfig({ asTable: legend.asTable })"
     />
+  </div>
+  <div>
+    <span class="label">{{ t("legendOptions") }}</span>
     <span class="title ml-20 mr-5">{{ t("toTheRight") }}</span>
     <el-switch
       v-model="legend.toTheRight"
diff --git a/src/views/dashboard/graphs/Area.vue b/src/views/dashboard/graphs/Area.vue
index 46927f91..5e4336c4 100644
--- a/src/views/dashboard/graphs/Area.vue
+++ b/src/views/dashboard/graphs/Area.vue
@@ -44,7 +44,8 @@ defineProps({
       AreaConfig & {
         filters: Filters;
         relatedTrace: RelatedTrace;
-      } & { id: string }
+        id: string;
+      }
     >,
     default: () => ({}),
   },
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 3afc5aac..2a120cc5 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -27,6 +27,7 @@ import {
   RelatedTrace,
   Filters,
 } from "@/types/dashboard";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -48,6 +49,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+const { showEchartsLegend } = useLegendProcess();
 const option = computed(() => getOption());
 
 function getOption() {
@@ -118,7 +120,7 @@ function getOption() {
     },
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys, props.config.legend),
       icon: "circle",
       top: 0,
       left: 0,
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index 77d02c9d..67e5b6e1 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -33,6 +33,7 @@ import {
   Filters,
 } from "@/types/dashboard";
 import Legend from "./components/Legend.vue";
+import useLegendProcess from "@/hooks/useLegendProcessor";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -63,6 +64,7 @@ const props = defineProps({
     }),
   },
 });
+const { showEchartsLegend } = useLegendProcess();
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
@@ -156,7 +158,7 @@ function getOption() {
     tooltip: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
-      show: keys.length === 1 ? false : true,
+      show: showEchartsLegend(keys, props.config.legend),
       icon: "circle",
       top: 0,
       left: 0,