diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
index 09bdb1482967e283eeaa4000ed52851230d505aa..87e2ce777ed99ee3dace3ae6a5e493fe1a07cbf2 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex justify-space-between">
+    <div class="d-flex justify-space-between align-center">
       <v-btn-toggle v-model="propsType" tile group>
         <v-btn small value="phenotypes"> Phenotypes </v-btn>
         <v-btn small value="viability"> Viability </v-btn>
@@ -74,7 +74,6 @@ export default {
           curve: 'straight',
         },
         labels: ['0h', '12h', '24h', '48h'], // check why this needs to be like that!
-        xaxis: {},
         yaxis: {
           min: 0,
           max: 100,
@@ -88,6 +87,7 @@ export default {
         },
       },
       barChartOptions: {
+        colors: ['#8BC34A', '#FFC107', '#795548'],
         chart: {
           type: 'bar',
           stacked: true,
@@ -105,7 +105,7 @@ export default {
         xaxis: {
           labels: {
             formatter: (value) => {
-              return `${value}`
+              return `${parseInt(value)}`
             },
           },
         },
@@ -134,6 +134,11 @@ export default {
           position: 'bottom',
         },
       },
+      activityIDs: [
+        'Population Healthy Nuclei (%)',
+        'Population Fragmented Nuclei (%)',
+        'Population Pyknosed Nuclei (%)',
+      ],
     }
   },
   computed: {
@@ -175,6 +180,20 @@ export default {
           data: values,
         })
       }
+
+      const thisComponent = this
+      series.sort((seriesA, seriesB) => {
+        const nameA = seriesA.name
+        const nameB = seriesB.name
+        const positionA = thisComponent.activityIDs.findIndex(
+          (key) => key === nameA
+        )
+        const positionB = thisComponent.activityIDs.findIndex(
+          (key) => key === nameB
+        )
+
+        return positionA - positionB
+      })
       return series
     },
     phenotypesActivities() {
@@ -198,15 +217,9 @@ export default {
     },
     viabilityActivities() {
       const activities = {}
-      const activityIDs = [
-        'Population Fragmented Nuclei (%)',
-        'Population Healthy Nuclei (%)',
-        'Population Pyknosed Nuclei (%)',
-      ]
-
       for (const propKey of Object.keys(this.propertiesData)) {
         const propData = this.propertiesData[propKey]
-        if (activityIDs.includes(propKey)) {
+        if (this.activityIDs.includes(propKey)) {
           if (propData.config.show) {
             activities[propKey] = propData
           }