diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index e0062fb7886..3b3a0635270 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -167,10 +167,9 @@
                                 <template #default="scope">
                                     <!-- TODO: Replace the usage of StateChart with one of the new chart components -->
                                     <state-chart
-                                        :duration="true"
+                                        v-if="dailyGroupByFlowReady"
                                         :namespace="scope.row.namespace"
                                         :flow-id="scope.row.id"
-                                        v-if="dailyGroupByFlowReady"
                                         :data="chartData(scope.row)"
                                     />
                                 </template>
diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
index 736e2056b6d..3ebfb06dca4 100644
--- a/ui/src/components/stats/StateChart.vue
+++ b/ui/src/components/stats/StateChart.vue
@@ -21,7 +21,8 @@
     import {useRoute, useRouter} from "vue-router"
     import {Bar} from "vue-chartjs";
     import Utils from "../../utils/utils.js";
-    import {defaultConfig, tooltip, chartClick, backgroundFromState, getFormat} from "../../utils/charts.js";
+    import {getScheme} from "../../utils/scheme.js";
+    import {defaultConfig, tooltip, chartClick, getFormat} from "../../utils/charts.js";
     import {useI18n} from "vue-i18n";
 
     export default defineComponent({
@@ -68,6 +69,7 @@
             const dataReady = computed(() => props.data.length > 0)
 
             const options = computed(() => defaultConfig({
+                barThickness: 4,
                 onClick: (e, elements) => {
                     if (elements.length > 0 && elements[0].index !== undefined && elements[0].datasetIndex !== undefined) {
                         chartClick(
@@ -128,8 +130,7 @@
                             if (accumulator[state] === undefined) {
                                 accumulator[state] = {
                                     label: state,
-                                    backgroundColor: backgroundFromState(state),
-                                    borderRadius: 4,
+                                    backgroundColor: getScheme(state),
                                     yAxisID: "y",
                                     data: []
                                 };