diff --git a/web/src/components/countryhistorypricesgraph.js b/web/src/components/countryhistorypricesgraph.js
index 89f54d7d45f..2732d77763f 100644
--- a/web/src/components/countryhistorypricesgraph.js
+++ b/web/src/components/countryhistorypricesgraph.js
@@ -40,14 +40,14 @@ const prepareGraphData = (historyData, colorBlindModeEnabled, electricityMixMode
   const layerKeys = [PRICES_GRAPH_LAYER_KEY];
   const layerStroke = () => 'darkgray';
   const layerFill = () => '#616161';
-  const focusFill = key => d => priceColorScale(d.data[key]);
+  const markerFill = key => d => priceColorScale(d.data[key]);
 
   return {
     data,
     layerKeys,
     layerStroke,
     layerFill,
-    focusFill,
+    markerFill,
     valueAxisLabel,
   };
 };
@@ -79,7 +79,7 @@ const CountryHistoryPricesGraph = ({
     layerKeys,
     layerStroke,
     layerFill,
-    focusFill,
+    markerFill,
     valueAxisLabel,
   } = useMemo(
     () => prepareGraphData(historyData, colorBlindModeEnabled, electricityMixMode),
@@ -110,7 +110,7 @@ const CountryHistoryPricesGraph = ({
       layerKeys={layerKeys}
       layerStroke={layerStroke}
       layerFill={layerFill}
-      focusFill={focusFill}
+      markerFill={markerFill}
       startTime={startTime}
       endTime={endTime}
       valueAxisLabel={valueAxisLabel}
diff --git a/web/src/components/graph/areagraph.js b/web/src/components/graph/areagraph.js
index 46f52f76231..4277b4e847d 100644
--- a/web/src/components/graph/areagraph.js
+++ b/web/src/components/graph/areagraph.js
@@ -40,7 +40,7 @@ const getValueScale = (containerHeight, maxTotalValue) => scaleLinear()
   .domain([0, maxTotalValue * 1.1])
   .range([containerHeight, Y_AXIS_PADDING]);
 
-const getLayers = (data, layerKeys, layerStroke, layerFill, focusFill) => {
+const getLayers = (data, layerKeys, layerStroke, layerFill, markerFill) => {
   if (!data || !data[0]) return [];
   const stackedData = stack()
     .offset(stackOffsetDiverging)
@@ -49,7 +49,7 @@ const getLayers = (data, layerKeys, layerStroke, layerFill, focusFill) => {
     key,
     stroke: layerStroke ? layerStroke(key) : 'none',
     fill: layerFill(key),
-    focusFill: focusFill ? focusFill(key) : layerFill(key),
+    markerFill: markerFill ? markerFill(key) : layerFill(key),
     datapoints: stackedData[ind],
   }));
 };
@@ -76,9 +76,9 @@ const AreaGraph = React.memo(({
   */
   layerFill,
   /*
-    `focusFill` is an optional prop of that same format that overrides `layerFill` for the graph focal point fill.
+    `markerFill` is an optional prop of that same format that overrides `layerFill` for the graph focal point fill.
   */
-  focusFill,
+  markerFill,
   /*
     `startTime` and `endTime` are timestamps denoting the time interval of the rendered part of the graph.
     If not provided, they'll be inferred from timestamps of the first/last datapoints.
@@ -139,8 +139,8 @@ const AreaGraph = React.memo(({
 
   // Build layers
   const layers = useMemo(
-    () => getLayers(data, layerKeys, layerStroke, layerFill, focusFill),
-    [data, layerKeys, layerStroke, layerFill, focusFill]
+    () => getLayers(data, layerKeys, layerStroke, layerFill, markerFill),
+    [data, layerKeys, layerStroke, layerFill, markerFill]
   );
 
   // Generate graph scales
@@ -194,7 +194,7 @@ const AreaGraph = React.memo(({
         timeScale={timeScale}
         valueScale={valueScale}
         datetimes={datetimes}
-        fill={isNumber(selectedLayerIndex) && layers[selectedLayerIndex].focusFill}
+        fill={isNumber(selectedLayerIndex) && layers[selectedLayerIndex].markerFill}
         data={isNumber(selectedLayerIndex) && layers[selectedLayerIndex].datapoints}
         selectedTimeIndex={selectedTimeIndex}
       />