diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index e2ee48ee..58aedc08 100644
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -17,6 +17,10 @@
 import { LegendOptions } from "@/types/dashboard";
 
 export default function useLegendProcess(legend?: LegendOptions) {
+  let isRight = false;
+  if (legend && legend.toTheRight) {
+    isRight = true;
+  }
   function showEchartsLegend(keys: string[]) {
     if (legend && !legend.show === undefined) {
       return legend.show;
@@ -29,11 +33,6 @@ export default function useLegendProcess(legend?: LegendOptions) {
     }
     return true;
   }
-  function isRight() {
-    if (legend && legend.toTheRight) {
-      return true;
-    }
-    return false;
-  }
+
   return { showEchartsLegend, isRight };
 }
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 48efdf92..a3627e80 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="graph">
+  <div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
     <Graph :option="option" @select="clickEvent" :filters="config.filters" />
     <Legend :config="config.legend" :data="data" />
   </div>
@@ -49,7 +49,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const { showEchartsLegend } = useLegendProcess(props.config.legend);
+const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
 const option = computed(() => getOption());
 
 function getOption() {
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index f0e68237..bbabdf50 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'">
+  <div class="graph flex-v" :class="isRight ? 'flex-h' : 'flex-v'">
     <Graph
       :option="option"
       @select="clickEvent"
@@ -65,7 +65,6 @@ const props = defineProps({
   },
 });
 const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
-const toTheRight = computed(() => isRight());
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index 6383aca5..1fb91bed 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>legend</div>
+  <div :style="`width: ${config.width || '100%'}`">legend</div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";