Merge pull request #98 from gobitfly/BIDS-2823/ImproveChartSpacing

Improve chart styling
gobitfly · Mar 12, 2024 · 0b6ee8c · 0b6ee8c
2 parents 859aa3c + 2b0866e
commit 0b6ee8c
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue
@@ -86,7 +86,12 @@ const option = computed(() => {
   }
 
   return {
-    height: 400,
+    grid: {
+      containLabel: true,
+      top: 10,
+      left: '5%',
+      right: '5%'
+    },
     xAxis: {
       type: 'category',
       data: chartData.value?.categories,
@@ -108,7 +113,7 @@ const option = computed(() => {
       name: $t('dashboard.validator.summary.chart.efficiency'),
       nameLocation: 'center',
       nameTextStyle: {
-        padding: [0, 0, 35, 0]
+        padding: [0, 0, 30, 0]
       },
       type: 'value',
       minInterval: 50,
@@ -134,7 +139,7 @@ const option = computed(() => {
     legend: {
       type: 'scroll',
       orient: 'horizontal',
-      bottom: 65,
+      bottom: 40,
       textStyle: {
         color: colors.value.label,
         fontSize: textSize,
@@ -187,7 +192,4 @@ const option = computed(() => {
 </template>
 
 <style lang="scss">
-  .chart-container {
-    background-color: var(--container-background);
-  }
 </style>