diff --git a/components/lib/themes/primeone/base/metergroup/index.js b/components/lib/themes/primeone/base/metergroup/index.js
index 2e8007989..b97662b34 100644
--- a/components/lib/themes/primeone/base/metergroup/index.js
+++ b/components/lib/themes/primeone/base/metergroup/index.js
@@ -7,7 +7,7 @@ export default {
 
 .p-metergroup-meters {
     display: flex;
-    background: ${dt('metergroup.meters.background.color')};
+    background: ${dt('metergroup.meters.background')};
     border-radius: ${dt('rounded.base')};
 }
 
diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue
index e67b02c23..73d49dae5 100644
--- a/doc/metergroup/BasicDoc.vue
+++ b/doc/metergroup/BasicDoc.vue
@@ -12,7 +12,7 @@
 export default {
     data() {
         return {
-            value: [{ label: 'Space used', value: 15 }],
+            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
             code: {
                 basic: `
 <MeterGroup :value="value" />
@@ -28,7 +28,7 @@ export default {
 export default {
     data() {
         return {
-            value: [{ label: 'Space used', value: 15 }],
+            value: [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }],
         };
     }
 };
@@ -44,7 +44,7 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const value = ref([{ label: 'Space used', value: 15 }]);
+const value = ref([{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }]);
 <\/script>
 `
             }