diff --git a/ayanova/src/api/dash-registry.js b/ayanova/src/api/dash-registry.js
index a5b8ded4..6c05dd0c 100644
--- a/ayanova/src/api/dash-registry.js
+++ b/ayanova/src/api/dash-registry.js
@@ -62,7 +62,12 @@ export default {
       type: "GzDashLaborHoursPersonal",
       scheduleableUserOnly: true,
       singleOnly: false,
-      settings: { customTitle: null, dateRange: "*thismonth*", unit: "day" }
+      settings: {
+        customTitle: null,
+        dateRange: "*thismonth*",
+        unit: "day",
+        color: "#000000"
+      }
     },
     {
       id: "dash-labor-hours-personal-bar",
@@ -71,7 +76,12 @@ export default {
       type: "GzDashLaborHoursPersonalBar",
       scheduleableUserOnly: true,
       singleOnly: false,
-      settings: { customTitle: null, dateRange: "*thismonth*", unit: "day" }
+      settings: {
+        customTitle: null,
+        dateRange: "*thismonth*",
+        unit: "day",
+        color: "#000000"
+      }
     },
     {
       id: "TestBarWidgetCountByUserType",
diff --git a/ayanova/src/components/dash-labor-hours-personal-bar.vue b/ayanova/src/components/dash-labor-hours-personal-bar.vue
index 0f3f64ea..3a6883d5 100644
--- a/ayanova/src/components/dash-labor-hours-personal-bar.vue
+++ b/ayanova/src/components/dash-labor-hours-personal-bar.vue
@@ -67,6 +67,13 @@
                 v-model="localSettings.customTitle"
                 :label="$ay.t('Name')"
               ></v-text-field>
+
+              <v-color-picker
+                v-model="localSettings.color"
+                hide-mode-switch
+                hide-inputs
+                mode="hexa"
+              ></v-color-picker>
             </v-card-text>
 
             <v-divider></v-divider>
@@ -91,7 +98,7 @@
 </template>
 <script>
 import GzDash from "./dash-base.vue";
-import Palette from "../api/palette";
+//import Palette from "../api/palette";
 export default {
   components: {
     GzDash
@@ -145,7 +152,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("WorkOrderItemLaborServiceRateQuantity"),
-            backgroundColor: Palette.color.soft_green,
+            backgroundColor: this.settings.color ?? "#000000",
             data: this.obj
           }
         ]
@@ -170,6 +177,7 @@ export default {
       this.settings.customTitle = this.localSettings.customTitle;
       this.settings.dateRange = this.localSettings.dateRange;
       this.settings.unit = this.localSettings.unit;
+      this.settings.color = this.localSettings.color;
       this.$emit("dash-change");
       this.context = false;
       this.getDataFromApi();
diff --git a/ayanova/src/components/dash-labor-hours-personal.vue b/ayanova/src/components/dash-labor-hours-personal.vue
index 2a34f101..f318a15f 100644
--- a/ayanova/src/components/dash-labor-hours-personal.vue
+++ b/ayanova/src/components/dash-labor-hours-personal.vue
@@ -22,6 +22,7 @@
       ></gz-chart-line> -->
 
         <gz-chart-line
+          v-if="visible"
           :width="400"
           :height="330"
           :chart-data="chartData"
@@ -67,6 +68,13 @@
                 v-model="localSettings.customTitle"
                 :label="$ay.t('Name')"
               ></v-text-field>
+
+              <v-color-picker
+                v-model="localSettings.color"
+                hide-mode-switch
+                hide-inputs
+                mode="hexa"
+              ></v-color-picker>
             </v-card-text>
 
             <v-divider></v-divider>
@@ -91,7 +99,6 @@
 </template>
 <script>
 import GzDash from "./dash-base.vue";
-import Palette from "../api/palette";
 export default {
   components: {
     GzDash
@@ -102,6 +109,7 @@ export default {
   data() {
     return {
       obj: {},
+      visible: true,
       context: false,
       localSettings: {},
       selectLists: {
@@ -145,7 +153,7 @@ export default {
         datasets: [
           {
             label: this.$ay.t("WorkOrderItemLaborServiceRateQuantity"),
-            borderColor: Palette.color.soft_deep_blue,
+            borderColor: this.settings.color ?? "#000000",
             //backgroundColor: Palette.color.soft_deep_blue,
             fill: false,
             radius: 0,
@@ -175,9 +183,13 @@ export default {
       this.settings.customTitle = this.localSettings.customTitle;
       this.settings.dateRange = this.localSettings.dateRange;
       this.settings.unit = this.localSettings.unit;
+      this.settings.color = this.localSettings.color;
+
       this.$emit("dash-change");
       this.context = false;
       this.getDataFromApi();
+      this.visible = false;
+      this.visible = true;
     },
 
     async getDataFromApi() {