tweak display

resources/js/components/Evaluations/Single/Components/Step4/CyberRiskGraphElement.vue

 <template>
     <div class="graph-element row">
-        <div class="graph-legend col-3 mr-0 pr-0">
+        <div class="graph-legend col-3 mr-0 pr-0 text-muted">
             <span :title="fullLabel">{{singleData.labels[0]}}</span>
         </div>
         <div class="col-9 ml-0 pl-0">
-            <Bar :height="200" :width="150" :chart-data="singleData" :chart-options="options" />
+            <Bar :height="180" :width="150" :chart-data="singleData" :chart-options="options" />
         </div>
     </div>
 </template>
@@ -38,6 +38,7 @@ export default {
                     x: {
                         grid: {
                             display: false,
+                            drawBorder: false,
                         },
                         ticks : {
                             display: false,
@@ -46,6 +47,7 @@ export default {
                     y: {
                         grid: {
                             display: false,
+                            drawBorder: false,
                         },
                         ticks : {
                             display:false,
@@ -60,11 +62,11 @@ export default {
             return this.chartData.labels[this.index]
         },
         singleData() {
-            let label = this.chartData.labels[this.index].match(/.{1,50}(\s|$)/g)
+            let label = this.chartData.labels[this.index].match(/.{1,45}(\s|$)/g)
             if (label.length > 1) {
-                label = label[0] + '...'
+                label = label[0].trim() + '...'
             } else {
-                label = label[0];
+                label = label[0].trim();
             }
             return {
 
@@ -90,6 +92,8 @@ export default {
 }
 .graph-legend {
     writing-mode:vertical-rl;
-    max-height: 200px;
+    max-height: 180px;
+    margin-right: -0.5em !important;
+    text-align: center;
 }
 </style>