diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
index 16f33ebcedfbd10f8eb694b5c4ff89052ee9770a..58ecd0b3ad642f3c2f5a56a1b92fb606a45aeb30 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
@@ -4,7 +4,7 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 import ElecHalfHourChart from './ElecHalfHourChart'
 
 jest.mock('services/dateChart.service', () => {
@@ -20,6 +20,7 @@ describe('ElecHalfHourChart component', () => {
         zone: 'utc',
       }),
     },
+    global: mockGlobalState,
   })
   it('should be rendered correctly', () => {
     const wrapper = mount(
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index 5c3056586516010172a1a063caf5fe63384ccc92..85e8adfc9955a7ebd369557b6e4e2f0f23015a3f 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import * as chartActions from 'store/chart/chart.slice'
 import { graphData } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 import Bar from './Bar'
 
 const mockXScale: ScaleBand<string> = scaleBand()
@@ -41,6 +41,7 @@ describe('Bar component test', () => {
         zone: 'utc',
       }),
     },
+    global: mockGlobalState,
   })
 
   it('should correctly render Multifluid Bar', () => {
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 165529e7e734bcfb5a7865e789db1e09c181ab4f..d0ccd177170d02496e14e84a7c5f146569861175 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -1,6 +1,6 @@
 import { ScaleBand, ScaleLinear } from 'd3-scale'
 import { detect } from 'detect-browser'
-import { DataloadState, FluidType, TimeStep } from 'enums'
+import { FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import { Dataload } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -14,10 +14,10 @@ import { useAppDispatch, useAppSelector } from 'store/hooks'
 interface BarProps {
   index: number
   dataload: Dataload
+  compare: boolean
   compareDataload: Dataload | null
   fluidType: FluidType
   timeStep: TimeStep
-  compare: boolean
   xScale: ScaleBand<string>
   yScale: ScaleLinear<number, number>
   height: number
@@ -32,10 +32,10 @@ interface BarProps {
 const Bar = ({
   index,
   dataload,
+  compare,
   compareDataload,
   fluidType,
   timeStep,
-  compare,
   xScale,
   yScale,
   height,
@@ -47,7 +47,10 @@ const Bar = ({
   average,
 }: BarProps) => {
   const dispatch = useAppDispatch()
-  const { selectedDate } = useAppSelector(state => state.ecolyo.chart)
+  const {
+    chart: { selectedDate },
+    global: { fluidStatus },
+  } = useAppSelector(state => state.ecolyo)
   const [clicked, setClicked] = useState(false)
   const [animationEnded, setAnimationEnded] = useState(false)
   const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
@@ -127,6 +130,15 @@ const Bar = ({
     return compare ? xScale.bandwidth() / 2 : xScale.bandwidth()
   }
 
+  const lastDataDate =
+    fluidType !== FluidType.MULTIFLUID && fluidStatus[fluidType].lastDataDate
+
+  const dataMissingUpcoming = Boolean(
+    lastDataDate &&
+      dataload.date > lastDataDate &&
+      dataload.date < DateTime.local()
+  )
+
   const topRoundedRect = (
     x: number,
     y: number,
@@ -172,32 +184,31 @@ const Bar = ({
         </g>
       )}
       {/* placeholder bar for upcoming values */}
-      {height > 0 &&
-        dataload.state === DataloadState.COMING &&
-        dataload.date < DateTime.local() && (
-          <g
-            transform={`translate(${xScaleValue}, ${yScaleValue})`}
-            className="barFill"
-          >
-            <defs>
-              <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
-                <stop id="stop-color-1" offset="0%" />
-                <stop id="stop-color-2" offset="100%" />
-              </linearGradient>
-            </defs>
-            <path
-              d={topRoundedRect(
-                compare ? getBandWidth() : 0,
-                0,
-                weekdays ? 3 : getBandWidth(),
-                height - yScaleValue
-              )}
-              className={getBarClass()}
-              onClick={!weekdays ? handleClick : () => undefined}
-              onAnimationEnd={onAnimationEnd}
-            />
-          </g>
-        )}
+      {height > 0 && dataMissingUpcoming && (
+        <g
+          transform={`translate(${xScaleValue}, ${yScaleValue})`}
+          className="barFill"
+        >
+          <defs>
+            <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+              <stop id="stop-color-1" offset="0%" />
+              <stop id="stop-color-2" offset="100%" />
+            </linearGradient>
+          </defs>
+          <path
+            d={topRoundedRect(
+              compare ? getBandWidth() : 0,
+              0,
+              weekdays ? 3 : getBandWidth(),
+              height - yScaleValue
+            )}
+            className={getBarClass()}
+            onClick={!weekdays ? handleClick : () => undefined}
+            onAnimationEnd={onAnimationEnd}
+          />
+        </g>
+      )}
+      {/* hashed bars */}
       {height > 0 && dataload.value >= 0 && isMultiMissingFluid ? (
         <g
           transform={`translate(${xScaleValue}, ${yScaleValue})`}
@@ -258,6 +269,7 @@ const Bar = ({
         height > 0 &&
         dataload.value &&
         dataload.value >= 0 && (
+          // default colored bar
           <g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
             <defs>
               <linearGradient
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index cd2cf472cabafe99c4979beed678c58406f80d2e..bc3e796cc49aad8a4b842e4bc45c5abc4dcdab0a 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -91,11 +91,11 @@ const BarChart = ({
       />
 
       <g transform={`translate(${marginLeft},${marginTop})`}>
-        {chartData.actualData.map((d, index) => (
+        {chartData.actualData.map((data, index) => (
           <Bar
             key={index}
             index={index}
-            dataload={d}
+            dataload={data}
             compareDataload={
               chartData.comparisonData?.[index]
                 ? chartData.comparisonData[index]
@@ -109,11 +109,9 @@ const BarChart = ({
             height={getContentHeight()}
             isSwitching={isSwitching}
             isMultiMissingFluid={
-              d.state === DataloadState.AGGREGATED_WITH_EMPTY ||
-              d.state === DataloadState.AGGREGATED_WITH_COMING ||
-              d.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING
-                ? true
-                : false
+              data.state === DataloadState.AGGREGATED_WITH_EMPTY ||
+              data.state === DataloadState.AGGREGATED_WITH_COMING ||
+              data.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING
             }
             clickable={clickable}
             average={averageConsumption}