From 03257e84691c790758b57b645206adf2016e7db7 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 1 Sep 2023 19:53:39 +0200
Subject: [PATCH] Fix bot balance not showing

---
 src/components/charts/BalanceChart.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/BalanceChart.vue b/src/components/charts/BalanceChart.vue
index c4e0df74..9ff21807 100644
--- a/src/components/charts/BalanceChart.vue
+++ b/src/components/charts/BalanceChart.vue
@@ -1,8 +1,10 @@
 <template>
   <e-charts
     v-if="currencies"
+    ref="balanceChart"
     :option="balanceChartOptions"
     :theme="settingsStore.chartTheme"
+    :style="{ height: width * 0.6 + 'px' }"
     autoresize
   />
 </template>
@@ -24,8 +26,9 @@ import {
 
 import { BalanceValues } from '@/types';
 import { formatPriceCurrency } from '@/shared/formatters';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useSettingsStore } from '@/stores/settings';
+import { useElementSize } from '@vueuse/core';
 
 use([
   PieChart,
@@ -37,6 +40,9 @@ use([
   LabelLayout,
 ]);
 
+const balanceChart = ref(null);
+const { width } = useElementSize(balanceChart);
+
 const props = defineProps({
   currencies: { required: true, type: Array as () => BalanceValues[] },
   showTitle: { required: false, type: Boolean },
@@ -93,8 +99,6 @@ const balanceChartOptions = computed((): EChartsOption => {
 
 <style lang="scss" scoped>
 .echarts {
-  width: 100%;
-  height: 100%;
-  min-height: 240px;
+  min-height: 20px;
 }
 </style>