diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index b4818a32796c03afcbd0723bd7ec43c6e89b0086..d3191e93550f55dcf220c63b5e7ad6c61fcd9bed 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -4,7 +4,7 @@ import { mount } from 'enzyme'
 import { Dataload } from 'models'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import configureStore from 'redux-mock-store'
 import UsageEventService from 'services/usageEvent.service'
 import { baseDataLoad } from '../../../tests/__mocks__/chartData.mock'
@@ -50,21 +50,24 @@ const dataLoadWithValueDetail: Dataload = {
 }
 
 describe('Dataload consumption visualizer component', () => {
-  it('should render correctly', () => {
+  it('should render correctly multifluid and 3 clickable links', () => {
     const store = mockStore({
       ecolyo: mockInitialEcolyoState,
     })
     const wrapper = mount(
       <Provider store={store}>
-        <DataloadConsumptionVisualizer
-          fluidType={FluidType.MULTIFLUID}
-          dataload={baseDataLoad}
-          compareDataload={baseDataLoad}
-          setActive={jest.fn()}
-        />
+        <BrowserRouter>
+          <DataloadConsumptionVisualizer
+            fluidType={FluidType.MULTIFLUID}
+            dataload={baseDataLoad}
+            compareDataload={baseDataLoad}
+            setActive={jest.fn()}
+          />
+        </BrowserRouter>
       </Provider>
     )
     expect(wrapper).toMatchSnapshot()
+    expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
   })
   it('should render with single fluid', () => {
     const store = mockStore({
@@ -156,14 +159,14 @@ describe('Dataload consumption visualizer component', () => {
 
     const wrapper = mount(
       <Provider store={store}>
-        <Router>
+        <BrowserRouter>
           <DataloadConsumptionVisualizer
             fluidType={FluidType.MULTIFLUID}
             dataload={dataLoadWithValueDetail}
             compareDataload={emptyDataLoad}
             setActive={jest.fn()}
           />
-        </Router>
+        </BrowserRouter>
       </Provider>
     )
     jest.mock('services/usageEvent.service')
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 85ed7d9554cb8906e385696c70def0cb8b7f7a9a..be0f81676b33701aa787dcf8c0556fb5519ccf95 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -21,16 +21,13 @@ const DataloadConsumptionVisualizer = ({
   compareDataload,
   setActive,
 }: DataloadConsumptionVisualizerProps) => {
-  const { loading, showCompare } = useSelector(
-    (state: AppStore) => state.ecolyo.chart
-  )
+  const { showCompare } = useSelector((state: AppStore) => state.ecolyo.chart)
   const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
-
   const toggleEstimationModal = useCallback(() => {
     setOpenEstimationModal(prev => !prev)
   }, [])
 
-  if (loading || !dataload) {
+  if (!dataload) {
     return <div className="dataloadvisualizer-root" />
   }
 
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index e3a2075d632b0ac68586d2d92b6c0711aab83ec2..70032d957254c43a0dbb182a8836237eec4cf8ca 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dataload consumption visualizer component should render correctly 1`] = `ReactWrapper {}`;
+exports[`Dataload consumption visualizer component should render correctly multifluid and 3 clickable links 1`] = `ReactWrapper {}`;
 
 exports[`Dataload consumption visualizer component should render with single fluid 1`] = `ReactWrapper {}`;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 07e1410146986120f7a6024b7cc3081fdd5eaed1..3f9ed03bd0427b9e21c98dd4ead155d8274d0f70 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -50,8 +50,6 @@ const FluidChart: React.FC<FluidChartProps> = ({
   const currentFluidStatus = fluidStatus[fluidType]
   const isFluidConnected = isKonnectorActive(fluidStatus, fluidType)
   const [, setValidExploration] = useExploration()
-  // TODO use chart.loading ?
-  const [isLoaded, setIsLoaded] = useState<boolean>(false)
   const [containsHalfHourData, setContainsHalfHourData] =
     useState<boolean>(false)
 
@@ -72,8 +70,8 @@ const FluidChart: React.FC<FluidChartProps> = ({
   useEffect(() => {
     let subscribed = true
     async function loadData() {
-      const consumptionService = new ConsumptionService(client)
       if (fluidType === FluidType.ELECTRICITY) {
+        const consumptionService = new ConsumptionService(client)
         const halfHourData = await consumptionService.checkDoctypeEntries(
           FluidType.ELECTRICITY,
           TimeStep.HALF_AN_HOUR
@@ -82,12 +80,8 @@ const FluidChart: React.FC<FluidChartProps> = ({
           setContainsHalfHourData(true)
         }
       }
-      if (subscribed) {
-        setIsLoaded(true)
-      }
     }
-
-    loadData()
+    subscribed && loadData()
 
     return () => {
       subscribed = false
@@ -175,45 +169,38 @@ const FluidChart: React.FC<FluidChartProps> = ({
   )
 
   return (
-    <>
-      {isLoaded && (
-        <div className="fluidchart-root">
-          {!isFluidConnected && <LastDataValid />}
-          {currentTimeStep === TimeStep.HALF_AN_HOUR &&
-          !containsHalfHourData ? (
-            <HalfHourNoData />
-          ) : (
-            <>
-              <div className="fluidchart-content">
-                <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
-              </div>
-              {showCompare && currentTimeStep !== TimeStep.YEAR && (
-                <DisplayLegend />
-              )}
-            </>
-          )}
-          <TimeStepSelector fluidType={fluidType} />
-          {currentTimeStep !== TimeStep.YEAR && (
-            <div className="fluidchart-footer" onClick={handleChangeSwitch}>
-              <div className="fluidchart-footer-compare text-15-normal">
-                <StyledSwitch
-                  fluidType={fluidType}
-                  checked={showCompare}
-                  inputProps={{
-                    'aria-label': t(
-                      'consumption.accessibility.checkbox_compare'
-                    ),
-                  }}
-                />
-                <span className="fluidchart-footer-label graph-switch-text">
-                  {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
-                </span>
-              </div>
-            </div>
+    <div className="fluidchart-root">
+      {!isFluidConnected && <LastDataValid />}
+      {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? (
+        <HalfHourNoData />
+      ) : (
+        <>
+          <div className="fluidchart-content">
+            <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
+          </div>
+          {showCompare && currentTimeStep !== TimeStep.YEAR && (
+            <DisplayLegend />
           )}
+        </>
+      )}
+      <TimeStepSelector fluidType={fluidType} />
+      {currentTimeStep !== TimeStep.YEAR && (
+        <div className="fluidchart-footer" onClick={handleChangeSwitch}>
+          <div className="fluidchart-footer-compare text-15-normal">
+            <StyledSwitch
+              fluidType={fluidType}
+              checked={showCompare}
+              inputProps={{
+                'aria-label': t('consumption.accessibility.checkbox_compare'),
+              }}
+            />
+            <span className="fluidchart-footer-label graph-switch-text">
+              {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
+            </span>
+          </div>
         </div>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index 53d927fe18e36717419bffa5a24f6ec0dbf19cc8..f82f6302ec03ae1db67f901468584a1adc9a219a 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -23,7 +23,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
   setActive,
 }: FluidChartSwipeProps) => {
   const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
-  const { currentIndex, currentTimeStep, selectedDate, loading } = useSelector(
+  const { currentIndex, currentTimeStep, selectedDate } = useSelector(
     (state: AppStore) => state.ecolyo.chart
   )
   const swipe = useRef<HTMLDivElement>(null)
@@ -58,7 +58,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({
     dispatch(setCurrentIndex(updatedIndex))
   }
 
-  const { height, width } = useChartResize(swipe, 300, 940, loading)
+  const { height, width } = useChartResize(swipe)
 
   useEffect(() => {
     function initIndex() {
diff --git a/src/components/Hooks/useChartResize.tsx b/src/components/Hooks/useChartResize.tsx
index 74176aa12ba9d8d8760a34906b2b17423507a8d3..a1413d10efe8993df61db7216743dffacc4248d4 100644
--- a/src/components/Hooks/useChartResize.tsx
+++ b/src/components/Hooks/useChartResize.tsx
@@ -1,19 +1,21 @@
 import { useEffect, useState } from 'react'
 
+/**
+ * Update the width and height of the chart when the window is resized
+ */
 export const useChartResize = (
   ref: React.RefObject<HTMLDivElement>,
   maxHeight = 300,
-  maxWidth = 940,
-  loading = false
+  maxWidth = 940
 ) => {
-  const [width, setWidth] = useState(0)
-  const [height, setHeight] = useState(0)
+  const [width, setWidth] = useState(maxWidth)
+  const [height, setHeight] = useState(maxHeight)
 
   useEffect(() => {
     function handleResize() {
-      if (!loading) {
-        const chartContainerWidth = ref?.current?.offsetWidth ?? 400
-        const chartContainerHeight = ref?.current?.offsetHeight ?? 200
+      if (ref.current) {
+        const chartContainerWidth = ref.current.offsetWidth
+        const chartContainerHeight = ref.current.offsetHeight
         const width = Math.min(chartContainerWidth, maxWidth)
         const height = Math.min(chartContainerHeight, maxHeight)
         setWidth(width)
@@ -24,7 +26,13 @@ export const useChartResize = (
     handleResize()
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
-  }, [loading])
+  }, [
+    maxHeight,
+    maxWidth,
+    ref,
+    ref.current?.offsetHeight,
+    ref.current?.offsetWidth,
+  ])
 
   return { width, height }
 }