From c0634569d0e5e525186086a841872970cb3ff2ed Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Mon, 16 Dec 2024 22:48:05 +0100
Subject: [PATCH 1/8] fix: fixed theme switch -> parts of chart styling do not
 change on theme switch AND made sure the charts update when passed data
 changes

---
 src/components/Charts/CategoricalChart.tsx | 23 +++++++++-----
 src/components/Charts/LineChart.tsx        | 36 ++++++++++++++++------
 src/domain/props/ChartContainerProps.tsx   |  2 +-
 src/domain/props/ChartModalProps.tsx       |  2 +-
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index 24fe166a..810c27f5 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -39,17 +39,26 @@ export function CategoricalChart({
 }: CategoricalChartProps) {
   const { theme } = useTheme();
 
-  // build chart options for 'Highcharts'
-  const defaultChartOptions: Highcharts.Options = CategoricalChartOperations.getHighChartOptions(data);
-
   // controlling if a bar or pie chart is rendered; bar chart is the default
-  const [showPieChart, setShowPieChart] = useState(false);
-  const [chartOptions, setChartOptions] = useState(defaultChartOptions);
+  const [showPieChart, setShowPieChart] = useState<boolean>(false);
+  const [chartOptions, setChartOptions] = useState<Highcharts.Options | undefined>(
+    CategoricalChartOperations.getHighChartOptions(data, showPieChart)
+  );
+
+  // handling the theme switch
+  useEffect(() => {
+    // `theme` change does not guarantee that the NextUI CSS colors have already been changed;
+    // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
+    const rafId = requestAnimationFrame(() => {
+      setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [theme]);
 
-  // handling the bar and pie chart switch and the theme switch;
+  // handling the bar and pie chart switch and data changes
   useEffect(() => {
     setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
-  }, [showPieChart, theme]);
+  }, [theme, data]);
 
   const alternativeSwitchButtonProps = disablePieChartSwitch
     ? undefined
diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx
index 52891746..fa41d3ba 100644
--- a/src/components/Charts/LineChart.tsx
+++ b/src/components/Charts/LineChart.tsx
@@ -49,23 +49,24 @@ export function LineChart({
 }: LineChartProps) {
   const { theme } = useTheme();
 
-  // convert data to `LineChartData` and build chart options for 'Highcharts' (line and bar chart)
+  // make sure data is converted to `LineChartData`
   const lineChartData: LineChartData = LineChartOperations.convertToLineChartData(data);
-  const lineChartOptions: Highcharts.Options = LineChartOperations.getHighChartOptions(lineChartData);
 
   // the `selectedXAxisRange` saves the to be rendered x-axis range of the chart
   // can be changed using the `LinkeChartXAxisSlider` if the param `xAxisSlider==true`
   const xAxisLength: number = LineChartOperations.getDistinctXAxisValues(lineChartData).length;
-  const [selectedXAxisRange, setSelectedXAxisRange] = useState([0, xAxisLength - 1]);
+  const [selectedXAxisRange, setSelectedXAxisRange] = useState<number[]>([0, xAxisLength - 1]);
 
   // controlling if a line or bar chart is rendered; line chart is the default
-  const [showBarChart, setShowBarChart] = useState(false);
-  const [chartOptions, setChartOptions] = useState(lineChartOptions);
+  const [showBarChart, setShowBarChart] = useState<boolean>(false);
+  const [chartOptions, setChartOptions] = useState<Highcharts.Options | undefined>(
+    LineChartOperations.getHighChartOptions(lineChartData)
+  );
 
-  // handling the line and bar chart switch and the theme switch;
-  // also handling changing the x-axis range using the `LineChartXAxisSlider`;
-  // special: if the selected x-axis range has length 1 -> bar chart is displayed
-  useEffect(() => {
+  // general function to update the chart options -> only used by the following `useEffect` hooks
+  const updateChartOptions = () => {
+    // also handling changing the x-axis range using the `LineChartXAxisSlider`;
+    // special: if the selected x-axis range has length 1 -> bar chart is displayed
     if (showBarChart || selectedXAxisRange[1] - selectedXAxisRange[0] === 0) {
       setChartOptions(
         LineChartOperations.getHighChartOptions(lineChartData, selectedXAxisRange[0], selectedXAxisRange[1], true)
@@ -75,7 +76,22 @@ export function LineChart({
         LineChartOperations.getHighChartOptions(lineChartData, selectedXAxisRange[0], selectedXAxisRange[1])
       );
     }
-  }, [showBarChart, theme, selectedXAxisRange]);
+  };
+
+  // handling the line and bar chart switch, selected x-axis range changes and data changes
+  useEffect(() => {
+    updateChartOptions();
+  }, [showBarChart, selectedXAxisRange, data]);
+
+  // handling the theme switch
+  useEffect(() => {
+    // `theme` change does not guarantee that the NextUI CSS colors have already been changed;
+    // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
+    const rafId = requestAnimationFrame(() => {
+      updateChartOptions();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [theme]);
 
   // chart slider props - to manipulate the shown x-axis range
   const sliderProps = disableXAxisSlider
diff --git a/src/domain/props/ChartContainerProps.tsx b/src/domain/props/ChartContainerProps.tsx
index 6b021d1f..cd6a8e51 100644
--- a/src/domain/props/ChartContainerProps.tsx
+++ b/src/domain/props/ChartContainerProps.tsx
@@ -43,7 +43,7 @@ export interface ChartDownloadButtonProps {
  */
 
 export default interface ChartContainerProps {
-  chartOptions: Highcharts.Options;
+  chartOptions?: Highcharts.Options;
   chartData: LineChartData | CategoricalChartData;
 
   title?: string;
diff --git a/src/domain/props/ChartModalProps.tsx b/src/domain/props/ChartModalProps.tsx
index b3f6f338..647623a4 100644
--- a/src/domain/props/ChartModalProps.tsx
+++ b/src/domain/props/ChartModalProps.tsx
@@ -6,7 +6,7 @@ import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
 import { ChartAlternativeSwitchButtonProps, ChartSliderProps } from '@/domain/props/ChartContainerProps';
 
 export default interface ChartModalProps {
-  chartOptions: Highcharts.Options;
+  chartOptions?: Highcharts.Options;
   chartData: LineChartData | CategoricalChartData;
 
   title?: string;

From a17758e49bad7cbc6da6564af7aa05a1f6d3d2cf Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Mon, 16 Dec 2024 22:59:49 +0100
Subject: [PATCH 2/8] fix: disabling pie chart interactivity (pie sections are
 not clickable any more)

---
 src/components/Charts/CategoricalChart.tsx          |  2 +-
 src/operations/charts/CategoricalChartOperations.ts | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index 810c27f5..4534d614 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -58,7 +58,7 @@ export function CategoricalChart({
   // handling the bar and pie chart switch and data changes
   useEffect(() => {
     setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
-  }, [theme, data]);
+  }, [showPieChart, data]);
 
   const alternativeSwitchButtonProps = disablePieChartSwitch
     ? undefined
diff --git a/src/operations/charts/CategoricalChartOperations.ts b/src/operations/charts/CategoricalChartOperations.ts
index 3c59b3b1..0f025f4d 100644
--- a/src/operations/charts/CategoricalChartOperations.ts
+++ b/src/operations/charts/CategoricalChartOperations.ts
@@ -160,8 +160,8 @@ export default class CategoricalChartOperations {
         },
         pie: {
           animation: true,
-          allowPointSelect: true,
-          cursor: 'pointer',
+          allowPointSelect: false,
+          cursor: 'default',
           innerSize: '60%',
           borderWidth: 0,
           dataLabels: {
@@ -176,6 +176,13 @@ export default class CategoricalChartOperations {
               fontWeight: 'light',
             },
           },
+          states: {
+            hover: {
+              halo: {
+                size: 4, // shrinking the halo/glow size on hover
+              },
+            },
+          },
         },
       },
     };

From ca1f4fec3f486b28c206f354cfc17a45959c2723 Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Mon, 16 Dec 2024 23:09:25 +0100
Subject: [PATCH 3/8] fix: update chart options to chart container - reduces
 code redundancy

---
 src/components/Charts/CategoricalChart.tsx    | 24 +++++------------
 src/components/Charts/LineChart.tsx           | 27 ++++---------------
 .../Charts/helpers/ChartContainer.tsx         | 25 ++++++++++++++---
 src/domain/props/ChartContainerProps.tsx      |  3 ++-
 4 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index 4534d614..7a75a8af 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import Highcharts from 'highcharts';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { ChartContainer } from '@/components/Charts/helpers/ChartContainer';
 import { ChartType } from '@/domain/enums/ChartType.ts';
@@ -37,28 +36,16 @@ export function CategoricalChart({
   disablePieChartSwitch,
   disableDownload,
 }: CategoricalChartProps) {
-  const { theme } = useTheme();
-
   // controlling if a bar or pie chart is rendered; bar chart is the default
   const [showPieChart, setShowPieChart] = useState<boolean>(false);
   const [chartOptions, setChartOptions] = useState<Highcharts.Options | undefined>(
     CategoricalChartOperations.getHighChartOptions(data, showPieChart)
   );
 
-  // handling the theme switch
-  useEffect(() => {
-    // `theme` change does not guarantee that the NextUI CSS colors have already been changed;
-    // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
-    const rafId = requestAnimationFrame(() => {
-      setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [theme]);
-
-  // handling the bar and pie chart switch and data changes
-  useEffect(() => {
+  // function to update/recalculate the chart options
+  const recalculateChartOptions = () => {
     setChartOptions(CategoricalChartOperations.getHighChartOptions(data, showPieChart));
-  }, [showPieChart, data]);
+  };
 
   const alternativeSwitchButtonProps = disablePieChartSwitch
     ? undefined
@@ -71,8 +58,9 @@ export function CategoricalChart({
 
   return (
     <ChartContainer
-      chartOptions={chartOptions}
       chartData={data}
+      chartOptions={chartOptions}
+      recalculateChartOptions={recalculateChartOptions}
       title={title}
       description={description}
       small={small}
diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx
index fa41d3ba..e02098ae 100644
--- a/src/components/Charts/LineChart.tsx
+++ b/src/components/Charts/LineChart.tsx
@@ -1,8 +1,7 @@
 'use client';
 
 import Highcharts from 'highcharts';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { ChartContainer } from '@/components/Charts/helpers/ChartContainer';
 import { LineChartData } from '@/domain/entities/charts/LineChartData';
@@ -47,8 +46,6 @@ export function LineChart({
   disableXAxisSlider,
   disableDownload,
 }: LineChartProps) {
-  const { theme } = useTheme();
-
   // make sure data is converted to `LineChartData`
   const lineChartData: LineChartData = LineChartOperations.convertToLineChartData(data);
 
@@ -63,8 +60,8 @@ export function LineChart({
     LineChartOperations.getHighChartOptions(lineChartData)
   );
 
-  // general function to update the chart options -> only used by the following `useEffect` hooks
-  const updateChartOptions = () => {
+  // function to update/recalculate the chart options
+  const recalculateChartOptions = () => {
     // also handling changing the x-axis range using the `LineChartXAxisSlider`;
     // special: if the selected x-axis range has length 1 -> bar chart is displayed
     if (showBarChart || selectedXAxisRange[1] - selectedXAxisRange[0] === 0) {
@@ -78,21 +75,6 @@ export function LineChart({
     }
   };
 
-  // handling the line and bar chart switch, selected x-axis range changes and data changes
-  useEffect(() => {
-    updateChartOptions();
-  }, [showBarChart, selectedXAxisRange, data]);
-
-  // handling the theme switch
-  useEffect(() => {
-    // `theme` change does not guarantee that the NextUI CSS colors have already been changed;
-    // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
-    const rafId = requestAnimationFrame(() => {
-      updateChartOptions();
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [theme]);
-
   // chart slider props - to manipulate the shown x-axis range
   const sliderProps = disableXAxisSlider
     ? undefined
@@ -115,8 +97,9 @@ export function LineChart({
 
   return (
     <ChartContainer
-      chartOptions={chartOptions}
       chartData={lineChartData}
+      chartOptions={chartOptions}
+      recalculateChartOptions={recalculateChartOptions}
       title={title}
       description={description}
       small={small}
diff --git a/src/components/Charts/helpers/ChartContainer.tsx b/src/components/Charts/helpers/ChartContainer.tsx
index 85d006c7..38a05f70 100644
--- a/src/components/Charts/helpers/ChartContainer.tsx
+++ b/src/components/Charts/helpers/ChartContainer.tsx
@@ -1,11 +1,10 @@
-'use client';
-
 import { Button } from '@nextui-org/button';
 import { useDisclosure } from '@nextui-org/modal';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import { Maximize4 } from 'iconsax-react';
-import { useRef, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { useEffect, useRef, useState } from 'react';
 
 import ChartAlternativeSwitchButton from '@/components/Charts/helpers/buttons/ChartAlternativeSwitchButton';
 import ChartDownloadButton from '@/components/Charts/helpers/buttons/ChartDownloadButton';
@@ -25,8 +24,9 @@ import ChartContainerProps from '@/domain/props/ChartContainerProps';
  * The main goal of this component is to prevents code redundancy between `LineChart` and `CategoricalChart`.
  */
 export function ChartContainer({
-  chartOptions,
   chartData,
+  chartOptions,
+  recalculateChartOptions,
   title,
   description,
   small,
@@ -44,11 +44,28 @@ export function ChartContainer({
   const HEADER_PADDING = title ? 3 : 0;
   const MAIN_BOX_PADDING_FACTOR = noPadding ? 0 : 1;
 
+  const { theme } = useTheme();
+
   const chartRef = useRef<HighchartsReact.RefObject | null>(null);
 
   // full screen modal state handling
   const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
 
+  // handling the theme switch
+  useEffect(() => {
+    // `theme` change does not guarantee that the NextUI CSS colors have already been changed;
+    // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
+    const rafId = requestAnimationFrame(() => {
+      recalculateChartOptions();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [theme]);
+
+  // handling chart type switch, data changes and slider changes
+  useEffect(() => {
+    recalculateChartOptions();
+  }, [alternativeSwitchButtonProps?.showAlternativeChart, sliderProps?.selectedSliderRange, chartData]);
+
   // handling the x-axis range slider visibility
   const [showSlider, setShowSlider] = useState(false);
   return (
diff --git a/src/domain/props/ChartContainerProps.tsx b/src/domain/props/ChartContainerProps.tsx
index cd6a8e51..27cda93a 100644
--- a/src/domain/props/ChartContainerProps.tsx
+++ b/src/domain/props/ChartContainerProps.tsx
@@ -43,8 +43,9 @@ export interface ChartDownloadButtonProps {
  */
 
 export default interface ChartContainerProps {
-  chartOptions?: Highcharts.Options;
   chartData: LineChartData | CategoricalChartData;
+  chartOptions?: Highcharts.Options;
+  recalculateChartOptions: () => void;
 
   title?: string;
   description?: string;

From c036648a4048949a839eb44229039694a01d1703 Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Mon, 16 Dec 2024 23:25:21 +0100
Subject: [PATCH 4/8] fix: trigger the correct animation on chart type switch
 (e.g. if switching to pie chart -> the correct pie chart animation should be
 triggered)

---
 src/components/Charts/helpers/ChartContainer.tsx |  4 ++++
 src/components/Charts/helpers/ChartModal.tsx     | 12 +++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Charts/helpers/ChartContainer.tsx b/src/components/Charts/helpers/ChartContainer.tsx
index 38a05f70..d7deb80d 100644
--- a/src/components/Charts/helpers/ChartContainer.tsx
+++ b/src/components/Charts/helpers/ChartContainer.tsx
@@ -47,6 +47,7 @@ export function ChartContainer({
   const { theme } = useTheme();
 
   const chartRef = useRef<HighchartsReact.RefObject | null>(null);
+  const [chartKey, setChartKey] = useState(0);
 
   // full screen modal state handling
   const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
@@ -57,6 +58,7 @@ export function ChartContainer({
     // therefore we synchronize the update with the next repaint cycle, ensuring the CSS variables are updated
     const rafId = requestAnimationFrame(() => {
       recalculateChartOptions();
+      setChartKey((prev) => prev + 1); // forces chart to remount -> chart animation will be re-triggered
     });
     return () => cancelAnimationFrame(rafId);
   }, [theme]);
@@ -64,6 +66,7 @@ export function ChartContainer({
   // handling chart type switch, data changes and slider changes
   useEffect(() => {
     recalculateChartOptions();
+    setChartKey((prev) => prev + 1); // forces chart to remount -> chart animation will be re-triggered
   }, [alternativeSwitchButtonProps?.showAlternativeChart, sliderProps?.selectedSliderRange, chartData]);
 
   // handling the x-axis range slider visibility
@@ -123,6 +126,7 @@ export function ChartContainer({
           highcharts={Highcharts}
           options={chartOptions}
           ref={chartRef}
+          key={chartKey}
           containerProps={{
             style: {
               width: '100%',
diff --git a/src/components/Charts/helpers/ChartModal.tsx b/src/components/Charts/helpers/ChartModal.tsx
index eb10f838..4768f87d 100644
--- a/src/components/Charts/helpers/ChartModal.tsx
+++ b/src/components/Charts/helpers/ChartModal.tsx
@@ -3,7 +3,8 @@ import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@nextu
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import { Minus } from 'iconsax-react';
-import { useRef } from 'react';
+import { useTheme } from 'next-themes';
+import { useEffect, useRef, useState } from 'react';
 
 import ChartAlternativeSwitchButton from '@/components/Charts/helpers/buttons/ChartAlternativeSwitchButton';
 import ChartDownloadButton from '@/components/Charts/helpers/buttons/ChartDownloadButton';
@@ -31,7 +32,15 @@ export function ChartModal({
   showSlider,
   setShowSlider,
 }: ChartModalProps) {
+  const { theme } = useTheme();
+
   const chartRef = useRef<HighchartsReact.RefObject | null>(null);
+  const [chartKey, setChartKey] = useState(0);
+
+  // if chart changes -> force chart to remount -> chart animation will be re-triggered
+  useEffect(() => {
+    setChartKey((prev) => prev + 1);
+  }, [theme, alternativeSwitchButtonProps?.showAlternativeChart, sliderProps?.selectedSliderRange, chartData]);
 
   return (
     <Modal
@@ -76,6 +85,7 @@ export function ChartModal({
               highcharts={Highcharts}
               options={chartOptions}
               ref={chartRef}
+              key={chartKey}
               containerProps={{ style: { width: '100%', height: '45dvh', borderRadius: '0 0 0.5rem 0.5rem' } }}
             />
           </div>

From b1ff9e7ff2da7645c43e8c481d62421a6d1b2d3c Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Thu, 19 Dec 2024 13:36:54 +0100
Subject: [PATCH 5/8] feat: renaming: LineChart -> ContinuousChart (and all
 related components, functions, etc.

---
 public/sitemap-0.xml                          | 16 ++---
 src/app/elements/page.tsx                     | 40 +++++------
 src/components/Charts/CategoricalChart.tsx    |  2 +-
 .../{LineChart.tsx => ContinuousChart.tsx}    | 47 +++++++------
 .../Charts/helpers/ChartContainer.tsx         |  4 +-
 .../helpers/buttons/ChartSliderButton.tsx     |  4 +-
 .../ComparisonPortal/NoDataHint.tsx           |  4 +-
 src/components/Map/FcsAccordion.tsx           | 12 ++--
 src/components/Map/FcsRegionTooltip.tsx       |  4 +-
 .../entities/charts/BalanceOfTradeGraph.ts    |  4 +-
 ...ineChartData.ts => ContinuousChartData.ts} | 16 ++---
 .../entities/charts/CurrencyExchangeGraph.ts  |  4 +-
 src/domain/entities/charts/InflationGraphs.ts |  4 +-
 .../comparison/CountryComparisonChartdata.ts  | 12 ++--
 ...DataType.ts => ContinuousChartDataType.ts} |  2 +-
 src/domain/props/ChartContainerProps.tsx      |  8 +--
 src/domain/props/ChartModalProps.tsx          |  4 +-
 ...hartProps.tsx => ContinuousChartProps.tsx} |  6 +-
 src/domain/props/NoDataHintProps.ts           |  4 +-
 .../charts/ChartDownloadButtonOperations.ts   |  4 +-
 ...ations.ts => ContinuousChartOperations.ts} | 66 +++++++++----------
 .../CountryComparisonOperations.tsx           | 40 ++++++-----
 src/operations/map/FcsAccordionOperations.tsx | 18 ++---
 .../map/FcsRegionTooltipOperations.ts         |  8 +--
 24 files changed, 172 insertions(+), 161 deletions(-)
 rename src/components/Charts/{LineChart.tsx => ContinuousChart.tsx} (69%)
 rename src/domain/entities/charts/{LineChartData.ts => ContinuousChartData.ts} (74%)
 rename src/domain/enums/{LineChartDataType.ts => ContinuousChartDataType.ts} (83%)
 rename src/domain/props/{LineChartProps.tsx => ContinuousChartProps.tsx} (69%)
 rename src/operations/charts/{LineChartOperations.ts => ContinuousChartOperations.ts} (84%)

diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
index 796b60bf..8a098c9d 100644
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://localhost:3000/disclaimer</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/wiki</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/about</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/data_sources</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/elements</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/download-portal</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/comparison-portal</loc><lastmod>2024-12-19T12:18:06.105Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/about</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/disclaimer</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/wiki</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/data_sources</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/elements</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/comparison-portal</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/download-portal</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx
index db7181ae..dc9a26e5 100644
--- a/src/app/elements/page.tsx
+++ b/src/app/elements/page.tsx
@@ -5,12 +5,12 @@ import { useState } from 'react';
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
 import { CustomButton } from '@/components/Buttons/CustomButton';
 import { CategoricalChart } from '@/components/Charts/CategoricalChart';
-import { LineChart } from '@/components/Charts/LineChart';
+import { ContinuousChart } from '@/components/Charts/ContinuousChart';
 import MapSkeleton from '@/components/Map/MapSkeleton';
 import SearchBar from '@/components/Search/SearchBar';
 import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
-import { LineChartDataType } from '@/domain/enums/LineChartDataType.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 import AccordionsOperations from '@/operations/accordions/AccordionOperations';
 
 import { ReactComponent as FoodSvg } from '../../../public/Images/FoodConsumption.svg';
@@ -21,8 +21,8 @@ import { ReactComponent as FoodSvg } from '../../../public/Images/FoodConsumptio
  */
 export default async function Elements() {
   const [searchTerm, setSearchTerm] = useState('');
-  const simpleAndSmallLineChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
+  const simpleAndSmallContinuousChartData: ContinuousChartData = {
+    type: ContinuousChartDataType.LINE_CHART_DATA,
     xAxisType: 'linear',
     lines: [
       {
@@ -37,8 +37,8 @@ export default async function Elements() {
     ],
   };
 
-  const maxedOutLineChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
+  const maxedOutContinuousChartData: ContinuousChartData = {
+    type: ContinuousChartDataType.LINE_CHART_DATA,
     xAxisType: 'linear',
     yAxisLabel: 'yield',
     lines: [
@@ -97,8 +97,8 @@ export default async function Elements() {
     ],
   };
 
-  const predictionDummyChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
+  const predictionDummyChartData: ContinuousChartData = {
+    type: ContinuousChartDataType.LINE_CHART_DATA,
     xAxisType: 'linear',
     yAxisLabel: 'Mill',
     predictionVerticalLineX: 3,
@@ -129,7 +129,7 @@ export default async function Elements() {
     ],
   };
 
-  const categoricalDummyChartData1: CategoricalChartData = {
+  const categoricalDummyChartData: CategoricalChartData = {
     yAxisLabel: 'Mill',
     categories: [
       {
@@ -143,8 +143,8 @@ export default async function Elements() {
     ],
   };
 
-  const emptyDummyChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
+  const emptyDummyChartData: ContinuousChartData = {
+    type: ContinuousChartDataType.LINE_CHART_DATA,
     xAxisType: 'linear',
     yAxisLabel: 'Mill',
     predictionVerticalLineX: 3,
@@ -174,8 +174,8 @@ export default async function Elements() {
       <AccordionContainer items={AccordionsOperations.getAccordionData()} />
       <div className="w-full h-fit flex flex-row flex-wrap gap-10 justify-around px-8 pt-40 pb-16 border-b border-gray-800">
         <div className="w-250px h-fit">
-          <LineChart
-            data={simpleAndSmallLineChartData}
+          <ContinuousChart
+            data={simpleAndSmallContinuousChartData}
             small
             disableDownload
             disableBarChartSwitch
@@ -184,20 +184,20 @@ export default async function Elements() {
           />
         </div>
         <div className="w-400px h-fit">
-          <LineChart
-            title="Maxed Out Line Chart"
+          <ContinuousChart
+            title="Maxed Out Continuous Chart"
             description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor onsetetur sadipscing elitr."
-            data={maxedOutLineChartData}
+            data={maxedOutContinuousChartData}
           />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="" data={predictionDummyChartData} />
+          <ContinuousChart title="" data={predictionDummyChartData} />
         </div>
         <div className="w-400px h-fit">
-          <CategoricalChart title="" data={categoricalDummyChartData1} />
+          <CategoricalChart title="" data={categoricalDummyChartData} />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="Forecast XYZ" data={emptyDummyChartData} />
+          <ContinuousChart title="Forecast XYZ" data={emptyDummyChartData} />
         </div>
       </div>
       <MapSkeleton />
diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index 7a75a8af..ed80743b 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -10,7 +10,7 @@ import CategoricalChartOperations from '@/operations/charts/CategoricalChartOper
 
 /**
  * The `CategoricalChart` component is a box that primarily renders a title, description text, and a bar chart.
- * It should be used to plot categorical data. For continues data please use the `LineChart` component.
+ * It should be used to plot categorical data. For continues data please use the `ContinuousChart` component.
  * This component has a width of 100%, so it adjusts to the width of its parent element in which it is used.
  * The height of the entire box depends on the provided text, while the chart itself has a fixed height.
  * It also provides the option to open the chart in a full-screen modal, where one can download the data as well.
diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/ContinuousChart.tsx
similarity index 69%
rename from src/components/Charts/LineChart.tsx
rename to src/components/Charts/ContinuousChart.tsx
index 63b5d101..16b38519 100644
--- a/src/components/Charts/LineChart.tsx
+++ b/src/components/Charts/ContinuousChart.tsx
@@ -4,29 +4,29 @@ import Highcharts from 'highcharts';
 import { useEffect, useMemo, useState } from 'react';
 
 import { ChartContainer } from '@/components/Charts/helpers/ChartContainer';
-import { LineChartData } from '@/domain/entities/charts/LineChartData';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { ChartType } from '@/domain/enums/ChartType.ts';
-import LineChartProps from '@/domain/props/LineChartProps';
-import LineChartOperations from '@/operations/charts/LineChartOperations';
+import ContinuousChartProps from '@/domain/props/ContinuousChartProps';
+import ContinuousChartOperations from '@/operations/charts/ContinuousChartOperations.ts';
 
 /**
- * The LineChart component is a box that primarily renders a title, description text, and a line chart.
+ * The ContinuousChart component is a box that primarily renders a title, description text, and a line chart.
  * It should be used to plot categorical data. For continues data please use the `CategoricalChart` component.
  * This component has a width of 100%, so it adjusts to the width of its parent element in which it is used.
  * The height of the entire box depends on the provided text, while the chart itself has a fixed height.
  * It also provides the option to open the chart in a full-screen modal, where one can download the data as well.
  *
- * The data to be displayed in the chart can be provided in different types (see `LineChartProps.data`).
- * However, the preferred type is `LineChartData`.
+ * The data to be displayed in the chart can be provided in different types (see `ContinuousChartProps.data`).
+ * However, the preferred type is `ContinuousChartData`.
  *
- * To enable the LineChart component to support an additional `data` type, the following steps are required:
- * 1. Define an interface and add it to `LineChartProps.data`.
- * 2. Add another switch case in `LineChartOperations.convertToLineChartData` to convert the new interface to `LineChartData`.
+ * To enable the ContinuousChart component to support an additional `data` type, the following steps are required:
+ * 1. Define an interface and add it to `ContinuousChartProps.data`.
+ * 2. Add another switch case in `ContinuousChartOperations.convertToContinuousChartData` to convert the new interface to `ContinuousChartData`.
  *
  * @param data the actual data to be used in the chart
  * @param title chart title (optional)
  * @param description chart description text (optional)
- * @param small when selected, all components in the line chart box become slightly smaller (optional)
+ * @param small when selected, all components in the main box become slightly smaller (optional)
  * @param noPadding when selected, the main box has no padding on all sides (optional)
  * @param transparentBackground when selected, the background of the entire component is transparent (optional)
  * @param disableExpandable when selected, the functionality to open the chart in a larger modal is disabled (optional)
@@ -34,7 +34,7 @@ import LineChartOperations from '@/operations/charts/LineChartOperations';
  * @param disableXAxisSlider when selected, the functionality to change the x-axis range via a slider is disabled (optional)
  * @param disableDownload when selected, the functionality to download the chart is disabled (optional)
  */
-export function LineChart({
+export function ContinuousChart({
   data,
   title,
   description,
@@ -45,15 +45,15 @@ export function LineChart({
   disableBarChartSwitch,
   disableXAxisSlider,
   disableDownload,
-}: LineChartProps) {
-  // make sure data is converted to `LineChartData`
-  const lineChartData: LineChartData = LineChartOperations.convertToLineChartData(data);
+}: ContinuousChartProps) {
+  // make sure data is converted to `continuousChartData`
+  const continuousChartData: ContinuousChartData = ContinuousChartOperations.convertToContinuousChartData(data);
 
   // the `selectedXAxisRange` saves the to be rendered x-axis range of the chart
   // can be changed using the `LinkeChartXAxisSlider` if the param `xAxisSlider==true`
   const xAxisLength = useMemo(() => {
-    return LineChartOperations.getDistinctXAxisValues(lineChartData).length;
-  }, [lineChartData]);
+    return ContinuousChartOperations.getDistinctXAxisValues(continuousChartData).length;
+  }, [continuousChartData]);
   const [selectedXAxisRange, setSelectedXAxisRange] = useState<number[]>([0, xAxisLength - 1]);
 
   // we have to make sure that if the data changes we update the XAxis slider configuration as well
@@ -64,20 +64,25 @@ export function LineChart({
   // controlling if a line or bar chart is rendered; line chart is the default
   const [showBarChart, setShowBarChart] = useState<boolean>(false);
   const [chartOptions, setChartOptions] = useState<Highcharts.Options | undefined>(
-    LineChartOperations.getHighChartOptions(lineChartData)
+    ContinuousChartOperations.getHighChartOptions(continuousChartData)
   );
 
   // function to update/recalculate the chart options
   const recalculateChartOptions = () => {
-    // also handling changing the x-axis range using the `LineChartXAxisSlider`;
+    // also handling changing the x-axis range using the `ChartXAxisSlider`;
     // special: if the selected x-axis range has length 1 -> bar chart is displayed
     if (showBarChart || selectedXAxisRange[1] - selectedXAxisRange[0] === 0) {
       setChartOptions(
-        LineChartOperations.getHighChartOptions(lineChartData, selectedXAxisRange[0], selectedXAxisRange[1], true)
+        ContinuousChartOperations.getHighChartOptions(
+          continuousChartData,
+          selectedXAxisRange[0],
+          selectedXAxisRange[1],
+          true
+        )
       );
     } else {
       setChartOptions(
-        LineChartOperations.getHighChartOptions(lineChartData, selectedXAxisRange[0], selectedXAxisRange[1])
+        ContinuousChartOperations.getHighChartOptions(continuousChartData, selectedXAxisRange[0], selectedXAxisRange[1])
       );
     }
   };
@@ -104,7 +109,7 @@ export function LineChart({
 
   return (
     <ChartContainer
-      chartData={lineChartData}
+      chartData={continuousChartData}
       chartOptions={chartOptions}
       recalculateChartOptions={recalculateChartOptions}
       title={title}
diff --git a/src/components/Charts/helpers/ChartContainer.tsx b/src/components/Charts/helpers/ChartContainer.tsx
index f8c18db0..122f6a61 100644
--- a/src/components/Charts/helpers/ChartContainer.tsx
+++ b/src/components/Charts/helpers/ChartContainer.tsx
@@ -20,8 +20,8 @@ import ChartContainerProps from '@/domain/props/ChartContainerProps';
  * The height of the entire box depends on the provided text, while the chart itself has a fixed height.
  * It also provides the option to open the chart in a full-screen modal, where one can download the data as well.
  *
- * It is used by the `CategoricalChart` and `LineChart` components, which define the type of chart through the passed `chartOptions`.
- * The main goal of this component is to prevents code redundancy between `LineChart` and `CategoricalChart`.
+ * It is used by the `CategoricalChart` and `ContinuousChart` components, which define the type of chart through the passed `chartOptions`.
+ * The main goal of this component is to prevents code redundancy between `ContinuousChart` and `CategoricalChart`.
  */
 export function ChartContainer({
   chartData,
diff --git a/src/components/Charts/helpers/buttons/ChartSliderButton.tsx b/src/components/Charts/helpers/buttons/ChartSliderButton.tsx
index 5b108ac0..48d1dc3d 100644
--- a/src/components/Charts/helpers/buttons/ChartSliderButton.tsx
+++ b/src/components/Charts/helpers/buttons/ChartSliderButton.tsx
@@ -2,12 +2,12 @@ import { Button } from '@nextui-org/button';
 import { Settings } from 'iconsax-react';
 
 import { Tooltip } from '@/components/Tooltip/Tooltip';
-import { LineChartSliderButtonProps } from '@/domain/props/ChartContainerProps';
+import { ChartSliderButtonProps } from '@/domain/props/ChartContainerProps';
 
 /**
  * This component is tied to the `ChartContainer` and `ChartModal` component and should not be used independently.
  */
-export default function ChartSliderButton({ showSlider, setShowSlider, size = 4 }: LineChartSliderButtonProps) {
+export default function ChartSliderButton({ showSlider, setShowSlider, size = 4 }: ChartSliderButtonProps) {
   return (
     <Tooltip text="x-Axis Slider">
       <Button
diff --git a/src/components/ComparisonPortal/NoDataHint.tsx b/src/components/ComparisonPortal/NoDataHint.tsx
index 23e22676..f9d61801 100644
--- a/src/components/ComparisonPortal/NoDataHint.tsx
+++ b/src/components/ComparisonPortal/NoDataHint.tsx
@@ -1,7 +1,7 @@
 import { Alert } from '@nextui-org/alert';
 import { useEffect, useState } from 'react';
 
-import { isLineChartData } from '@/domain/entities/charts/LineChartData';
+import { isContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { NoDataHintProps } from '@/domain/props/NoDataHintProps.ts';
 
 export default function NoDataHint({ chartData, selectedCountryNames, isLoading }: NoDataHintProps) {
@@ -10,7 +10,7 @@ export default function NoDataHint({ chartData, selectedCountryNames, isLoading
   useEffect(() => {
     if (isLoading) return;
 
-    const countryNamesInChart = isLineChartData(chartData)
+    const countryNamesInChart = isContinuousChartData(chartData)
       ? chartData.lines.map((line) => line.name)
       : chartData.categories.map((category) => category.name);
     const missingCountryNames = selectedCountryNames.filter(
diff --git a/src/components/Map/FcsAccordion.tsx b/src/components/Map/FcsAccordion.tsx
index b7a32e8a..f842ad7d 100644
--- a/src/components/Map/FcsAccordion.tsx
+++ b/src/components/Map/FcsAccordion.tsx
@@ -9,7 +9,7 @@ import { ReactComponent as Import } from '../../../public/Images/Import.svg';
 import { ReactComponent as Population } from '../../../public/Images/Population.svg';
 import AccordionContainer from '../Accordions/AccordionContainer';
 import CustomCard from '../Cards/Card';
-import { LineChart } from '../Charts/LineChart';
+import { ContinuousChart } from '../Charts/ContinuousChart';
 import CustomInfoCircle from '../CustomInfoCircle/CustomInfoCircle';
 
 export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
@@ -78,7 +78,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
             content: (
               <div>
                 {fcsChartData ? (
-                  <LineChart
+                  <ContinuousChart
                     title="Trend of the number of people with insufficient food consumption"
                     data={fcsChartData}
                     small
@@ -90,7 +90,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
                 )}
                 <Spacer y={6} />
                 {rcsiChartData ? (
-                  <LineChart
+                  <ContinuousChart
                     title="Trend of the number of people using crisis or above crisis food-based coping"
                     data={rcsiChartData}
                     small
@@ -131,7 +131,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
             content: (
               <div>
                 {currencyExchangeChartData ? (
-                  <LineChart data={currencyExchangeChartData} small noPadding transparentBackground />
+                  <ContinuousChart data={currencyExchangeChartData} small noPadding transparentBackground />
                 ) : (
                   <p>No data about currency exchange</p>
                 )}
@@ -145,7 +145,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
             content: (
               <div>
                 {balanceOfTradeChartData ? (
-                  <LineChart data={balanceOfTradeChartData} small noPadding transparentBackground />
+                  <ContinuousChart data={balanceOfTradeChartData} small noPadding transparentBackground />
                 ) : (
                   <p>No data about balance of trade</p>
                 )}
@@ -159,7 +159,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
             content: (
               <div>
                 {headlineAndFoodInflationChartData ? (
-                  <LineChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
+                  <ContinuousChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
                 ) : (
                   <p>No data about headline and food inflation</p>
                 )}
diff --git a/src/components/Map/FcsRegionTooltip.tsx b/src/components/Map/FcsRegionTooltip.tsx
index 3ad1ad99..d1702089 100644
--- a/src/components/Map/FcsRegionTooltip.tsx
+++ b/src/components/Map/FcsRegionTooltip.tsx
@@ -3,7 +3,7 @@ import { Feature, GeoJsonProperties, Geometry } from 'geojson';
 import { FcsRegionTooltipOperations } from '@/operations/map/FcsRegionTooltipOperations';
 import { formatToMillion } from '@/utils/formatting';
 
-import { LineChart } from '../Charts/LineChart';
+import { ContinuousChart } from '../Charts/ContinuousChart';
 
 interface FcsRegionTooltipProps {
   feature: Feature<Geometry, GeoJsonProperties>;
@@ -49,7 +49,7 @@ export default function FcsRegionTooltip({ feature }: FcsRegionTooltipProps) {
       </div>
       <div className="px-1">
         {feature.properties?.fcsGraph && (
-          <LineChart
+          <ContinuousChart
             title="Number of people with insufficient food consumption"
             data={FcsRegionTooltipOperations.getFcsChartData(feature.properties.fcsGraph)}
             small
diff --git a/src/domain/entities/charts/BalanceOfTradeGraph.ts b/src/domain/entities/charts/BalanceOfTradeGraph.ts
index f1bc313f..292cf1e5 100644
--- a/src/domain/entities/charts/BalanceOfTradeGraph.ts
+++ b/src/domain/entities/charts/BalanceOfTradeGraph.ts
@@ -1,8 +1,8 @@
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 
 import { ChartData } from '../common/ChartData';
 
 export interface BalanceOfTradeGraph {
-  type: LineChartDataType.BALANCE_OF_TRADE_CHART;
+  type: ContinuousChartDataType.BALANCE_OF_TRADE_CHART;
   data: ChartData[];
 }
diff --git a/src/domain/entities/charts/LineChartData.ts b/src/domain/entities/charts/ContinuousChartData.ts
similarity index 74%
rename from src/domain/entities/charts/LineChartData.ts
rename to src/domain/entities/charts/ContinuousChartData.ts
index a2f55b6d..68ac2f3e 100644
--- a/src/domain/entities/charts/LineChartData.ts
+++ b/src/domain/entities/charts/ContinuousChartData.ts
@@ -1,8 +1,8 @@
 import { AxisTypeValue, DashStyleValue } from 'highcharts';
 
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 
-export interface LineChartDataPoint {
+export interface ContinuousChartDataPoint {
   x: number;
   y?: number;
   yRangeMin?: number;
@@ -31,18 +31,18 @@ export interface ChartVerticalBand {
  * Important: if the `dashStyle` is not defined or 'Solid' the bars are filled entirely,
  * if any other `dashStyle` is chosen the bars are always filled with a "striped" pattern.
  *
- * If a line is marked as `prediction` the color and dash-style are automatically set by the LineChart component.
+ * If a line is marked as `prediction` the color and dash-style are automatically set by the ContinuousChart component.
  * If a `predictionVerticalLineX` is chosen a vertical band, titled with "Future" is added automatically,
  * starting from `predictionVerticalLineX` and spanning to the end of the chart.
  */
-export interface LineChartData {
-  type: LineChartDataType.LINE_CHART_DATA;
+export interface ContinuousChartData {
+  type: ContinuousChartDataType.LINE_CHART_DATA;
   xAxisType: AxisTypeValue;
   yAxisLabel?: string;
   predictionVerticalLineX?: number;
   lines: {
     name: string;
-    dataPoints: LineChartDataPoint[];
+    dataPoints: ContinuousChartDataPoint[];
     showRange?: boolean;
     color?: string;
     dashStyle?: DashStyleValue;
@@ -52,6 +52,6 @@ export interface LineChartData {
   verticalBands?: ChartVerticalBand[];
 }
 
-export function isLineChartData(data: unknown): data is LineChartData {
-  return (data as LineChartData).type === LineChartDataType.LINE_CHART_DATA;
+export function isContinuousChartData(data: unknown): data is ContinuousChartData {
+  return (data as ContinuousChartData).type === ContinuousChartDataType.LINE_CHART_DATA;
 }
diff --git a/src/domain/entities/charts/CurrencyExchangeGraph.ts b/src/domain/entities/charts/CurrencyExchangeGraph.ts
index b2cf2608..1983e745 100644
--- a/src/domain/entities/charts/CurrencyExchangeGraph.ts
+++ b/src/domain/entities/charts/CurrencyExchangeGraph.ts
@@ -1,9 +1,9 @@
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 
 import { ChartData } from '../common/ChartData';
 
 export interface CurrencyExchangeGraph {
-  type: LineChartDataType.CURRENCY_EXCHANGE_CHART;
+  type: ContinuousChartDataType.CURRENCY_EXCHANGE_CHART;
   name: string;
   source: string;
   updated: string;
diff --git a/src/domain/entities/charts/InflationGraphs.ts b/src/domain/entities/charts/InflationGraphs.ts
index 23123ace..20ab7c89 100644
--- a/src/domain/entities/charts/InflationGraphs.ts
+++ b/src/domain/entities/charts/InflationGraphs.ts
@@ -1,9 +1,9 @@
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 
 import { ChartData } from '../common/ChartData';
 
 export interface InflationGraphs {
-  type: LineChartDataType.INFLATION_CHARTS;
+  type: ContinuousChartDataType.INFLATION_CHARTS;
   headline: {
     data: ChartData[] | undefined;
   };
diff --git a/src/domain/entities/comparison/CountryComparisonChartdata.ts b/src/domain/entities/comparison/CountryComparisonChartdata.ts
index 80650fd3..9aa1ab05 100644
--- a/src/domain/entities/comparison/CountryComparisonChartdata.ts
+++ b/src/domain/entities/comparison/CountryComparisonChartdata.ts
@@ -1,13 +1,13 @@
 import { CategoricalChartData } from '../charts/CategoricalChartData';
-import { LineChartData } from '../charts/LineChartData';
+import { ContinuousChartData } from '../charts/ContinuousChartData.ts';
 
 export interface CountryComparisonChartData {
-  fcsChartData?: LineChartData;
-  rcsiChartData?: LineChartData;
+  fcsChartData?: ContinuousChartData;
+  rcsiChartData?: ContinuousChartData;
   foodSecurityBarChartData?: CategoricalChartData;
   populationBarChartData?: CategoricalChartData;
   importDependencyBarChartData?: CategoricalChartData;
-  balanceOfTradeData?: LineChartData;
-  headlineInflationData?: LineChartData;
-  foodInflationData?: LineChartData;
+  balanceOfTradeData?: ContinuousChartData;
+  headlineInflationData?: ContinuousChartData;
+  foodInflationData?: ContinuousChartData;
 }
diff --git a/src/domain/enums/LineChartDataType.ts b/src/domain/enums/ContinuousChartDataType.ts
similarity index 83%
rename from src/domain/enums/LineChartDataType.ts
rename to src/domain/enums/ContinuousChartDataType.ts
index e1602716..c8b3cbe2 100644
--- a/src/domain/enums/LineChartDataType.ts
+++ b/src/domain/enums/ContinuousChartDataType.ts
@@ -1,4 +1,4 @@
-export enum LineChartDataType {
+export enum ContinuousChartDataType {
   LINE_CHART_DATA = 'LINE_CHART_DATA',
   BALANCE_OF_TRADE_CHART = 'BALANCE_OF_TRADE_CHART',
   CURRENCY_EXCHANGE_CHART = 'CURRENCY_EXCHANGE_CHART',
diff --git a/src/domain/props/ChartContainerProps.tsx b/src/domain/props/ChartContainerProps.tsx
index 39e65fad..f274b9dd 100644
--- a/src/domain/props/ChartContainerProps.tsx
+++ b/src/domain/props/ChartContainerProps.tsx
@@ -3,14 +3,14 @@ import HighchartsReact from 'highcharts-react-official';
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
 
 import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { ChartType } from '@/domain/enums/ChartType.ts';
 
 /**
  * helpers props
  */
 
-export interface LineChartSliderButtonProps {
+export interface ChartSliderButtonProps {
   showSlider: boolean;
   setShowSlider: Dispatch<SetStateAction<boolean>>;
   size?: number;
@@ -34,7 +34,7 @@ export interface ChartSliderProps {
 
 export interface ChartDownloadButtonProps {
   chartRef: MutableRefObject<HighchartsReact.RefObject | null>;
-  chartData: LineChartData | CategoricalChartData;
+  chartData: ContinuousChartData | CategoricalChartData;
   size?: number;
 }
 
@@ -43,7 +43,7 @@ export interface ChartDownloadButtonProps {
  */
 
 export default interface ChartContainerProps {
-  chartData: LineChartData | CategoricalChartData;
+  chartData: ContinuousChartData | CategoricalChartData;
   chartOptions?: Highcharts.Options;
   recalculateChartOptions: () => void;
 
diff --git a/src/domain/props/ChartModalProps.tsx b/src/domain/props/ChartModalProps.tsx
index 647623a4..aa3285c0 100644
--- a/src/domain/props/ChartModalProps.tsx
+++ b/src/domain/props/ChartModalProps.tsx
@@ -2,12 +2,12 @@ import Highcharts from 'highcharts';
 import { Dispatch, SetStateAction } from 'react';
 
 import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { ChartAlternativeSwitchButtonProps, ChartSliderProps } from '@/domain/props/ChartContainerProps';
 
 export default interface ChartModalProps {
   chartOptions?: Highcharts.Options;
-  chartData: LineChartData | CategoricalChartData;
+  chartData: ContinuousChartData | CategoricalChartData;
 
   title?: string;
   description?: string;
diff --git a/src/domain/props/LineChartProps.tsx b/src/domain/props/ContinuousChartProps.tsx
similarity index 69%
rename from src/domain/props/LineChartProps.tsx
rename to src/domain/props/ContinuousChartProps.tsx
index d9a50954..6db8fbcd 100644
--- a/src/domain/props/LineChartProps.tsx
+++ b/src/domain/props/ContinuousChartProps.tsx
@@ -1,10 +1,10 @@
 import { BalanceOfTradeGraph } from '@/domain/entities/charts/BalanceOfTradeGraph.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { CurrencyExchangeGraph } from '@/domain/entities/charts/CurrencyExchangeGraph.ts';
 import { InflationGraphs } from '@/domain/entities/charts/InflationGraphs.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
 
-export default interface LineChartProps {
-  data: LineChartData | BalanceOfTradeGraph | CurrencyExchangeGraph | InflationGraphs;
+export default interface ContinuousChartProps {
+  data: ContinuousChartData | BalanceOfTradeGraph | CurrencyExchangeGraph | InflationGraphs;
 
   title?: string;
   description?: string;
diff --git a/src/domain/props/NoDataHintProps.ts b/src/domain/props/NoDataHintProps.ts
index 30b2965f..2cb139df 100644
--- a/src/domain/props/NoDataHintProps.ts
+++ b/src/domain/props/NoDataHintProps.ts
@@ -1,9 +1,9 @@
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 
 import { CategoricalChartData } from '../entities/charts/CategoricalChartData';
 
 export interface NoDataHintProps {
-  chartData: LineChartData | CategoricalChartData;
+  chartData: ContinuousChartData | CategoricalChartData;
   selectedCountryNames: string[];
   isLoading: boolean;
 }
diff --git a/src/operations/charts/ChartDownloadButtonOperations.ts b/src/operations/charts/ChartDownloadButtonOperations.ts
index 93eed440..44aec9c4 100644
--- a/src/operations/charts/ChartDownloadButtonOperations.ts
+++ b/src/operations/charts/ChartDownloadButtonOperations.ts
@@ -9,7 +9,7 @@ import patternFill from 'highcharts/modules/pattern-fill';
 import HighchartsReact from 'highcharts-react-official';
 
 import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 
 // initialize the exporting module
 if (typeof Highcharts === 'object') {
@@ -59,7 +59,7 @@ export default class ChartDownloadButtonOperations {
   /**
    * Trigger download of the given line chart `data` as a json file.
    */
-  public static downloadDataJSON(data: LineChartData | CategoricalChartData): void {
+  public static downloadDataJSON(data: ContinuousChartData | CategoricalChartData): void {
     // convert data json object to string and encode as URI
     const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data, null, 2))}`;
     // create a temporary link element and trigger the download
diff --git a/src/operations/charts/LineChartOperations.ts b/src/operations/charts/ContinuousChartOperations.ts
similarity index 84%
rename from src/operations/charts/LineChartOperations.ts
rename to src/operations/charts/ContinuousChartOperations.ts
index 9bf2422e..a8066a16 100644
--- a/src/operations/charts/LineChartOperations.ts
+++ b/src/operations/charts/ContinuousChartOperations.ts
@@ -10,10 +10,10 @@ import highchartsMore from 'highcharts/highcharts-more';
 import patternFill from 'highcharts/modules/pattern-fill';
 
 import { BalanceOfTradeGraph } from '@/domain/entities/charts/BalanceOfTradeGraph.ts';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { CurrencyExchangeGraph } from '@/domain/entities/charts/CurrencyExchangeGraph.ts';
 import { InflationGraphs } from '@/domain/entities/charts/InflationGraphs.ts';
-import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
-import { LineChartDataType } from '@/domain/enums/LineChartDataType.ts';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 import { formatToMillion } from '@/utils/formatting.ts';
 import { getTailwindColor } from '@/utils/tailwind-util.ts';
 
@@ -23,11 +23,11 @@ if (typeof Highcharts === 'object') {
   patternFill(Highcharts);
 }
 /**
- * Using LineChartOperations, the LineChart component can convert its received data into LineChartData
+ * Using ContinuousChartOperations, the ContinuousChart component can convert its received data into ContinuousChartData
  * and then generate the chart `Highcharts.Options` object required by the Highcharts component.
- * Two types of options can be created: rendering the LineChart data as a line chart or as a bar chart.
+ * Two types of options can be created: rendering the ContinuousChart data as a line chart or as a bar chart.
  */
-export default class LineChartOperations {
+export default class ContinuousChartOperations {
   /**
    * List of different dash styles for visualizing prediction data.
    * All lines that are marked as `prediction` are colored with the same predictions color,
@@ -75,7 +75,7 @@ export default class LineChartOperations {
   }
 
   /**
-   * Tooltip formatter function for `LineChart.Options.xAxis.labels.formatter` usage only.
+   * Tooltip formatter function for `ContinuousChart.Options.xAxis.labels.formatter` usage only.
    */
   private static chartXAxisFormatter(xAxisType: AxisTypeValue, x: string | number): string {
     if (xAxisType === 'datetime' && typeof x === 'number') {
@@ -85,21 +85,21 @@ export default class LineChartOperations {
   }
 
   /**
-   * With this static function, the LineChart component can ensure that the received data for the chart
-   * is converted to the `LineChartData` type.
-   * To support another interface in `LineChartProps.data`, one has to add another switch case here
-   * that converts the new interface into `LineChartData`.
+   * With this static function, the ContinuousChart component can ensure that the received data for the chart
+   * is converted to the `ContinuousChartData` type.
+   * To support another interface in `ContinuousChartProps.data`, one has to add another switch case here
+   * that converts the new interface into `ContinuousChartData`.
    */
-  public static convertToLineChartData(
-    data: LineChartData | BalanceOfTradeGraph | CurrencyExchangeGraph | InflationGraphs
-  ): LineChartData {
+  public static convertToContinuousChartData(
+    data: ContinuousChartData | BalanceOfTradeGraph | CurrencyExchangeGraph | InflationGraphs
+  ): ContinuousChartData {
     switch (data.type) {
-      case LineChartDataType.LINE_CHART_DATA:
+      case ContinuousChartDataType.LINE_CHART_DATA:
         return data;
 
-      case LineChartDataType.BALANCE_OF_TRADE_CHART:
+      case ContinuousChartDataType.BALANCE_OF_TRADE_CHART:
         return {
-          type: LineChartDataType.LINE_CHART_DATA,
+          type: ContinuousChartDataType.LINE_CHART_DATA,
           xAxisType: 'datetime',
           yAxisLabel: 'Mill',
           lines: [
@@ -112,9 +112,9 @@ export default class LineChartOperations {
           ],
         };
 
-      case LineChartDataType.CURRENCY_EXCHANGE_CHART:
+      case ContinuousChartDataType.CURRENCY_EXCHANGE_CHART:
         return {
-          type: LineChartDataType.LINE_CHART_DATA,
+          type: ContinuousChartDataType.LINE_CHART_DATA,
           xAxisType: 'datetime',
           yAxisLabel: 'Exchange rate',
           lines: [
@@ -127,9 +127,9 @@ export default class LineChartOperations {
           ],
         };
 
-      case LineChartDataType.INFLATION_CHARTS:
+      case ContinuousChartDataType.INFLATION_CHARTS:
         return {
-          type: LineChartDataType.LINE_CHART_DATA,
+          type: ContinuousChartDataType.LINE_CHART_DATA,
           xAxisType: 'datetime',
           yAxisLabel: 'Rate in %',
           lines: [
@@ -151,9 +151,9 @@ export default class LineChartOperations {
         };
 
       default:
-        // if the given type is not supported yet, an empty `LineChartData` instance is returned
+        // if the given type is not supported yet, an empty `ContinuousChartData` instance is returned
         return {
-          type: LineChartDataType.LINE_CHART_DATA,
+          type: ContinuousChartDataType.LINE_CHART_DATA,
           xAxisType: 'linear',
           lines: [],
         };
@@ -161,9 +161,9 @@ export default class LineChartOperations {
   }
 
   /**
-   * Given `LineChartData` get list of all distinct x values of all lines' data points.
+   * Given `ContinuousChartData` get list of all distinct x values of all lines' data points.
    */
-  public static getDistinctXAxisValues(data: LineChartData): number[] {
+  public static getDistinctXAxisValues(data: ContinuousChartData): number[] {
     const uniqueXValues = new Set<number>();
     data.lines.forEach((line) => {
       line.dataPoints?.forEach((point) => {
@@ -174,13 +174,13 @@ export default class LineChartOperations {
   }
 
   /**
-   * With this static function, the LineChart component can build the `HighCharts.Options` object
-   * for a line chart or bar chart, out of a given `LineChartData` instance.
+   * With this static function, the ContinuousChar component can build the `HighCharts.Options` object
+   * for a line chart or bar chart, out of a given `ContinuousChartData` instance.
    *
    * Setting the 'xAxisSelectedMinIdx' and 'xAxisSelectedMinIdx' the rendered x-axis range
    * can be manipulated; important: if a min is defined a max must be defined as well and vice versa.
    *
-   * @param data `LineChartData` object, containing all data to be plotted in the chart
+   * @param data `ContinuousChartData` object, containing all data to be plotted in the chart
    * @param barChart if true, bars are plotted instead of lines
    * @param xAxisSelectedMinIdx index of selected x-axis range min value
    * @param xAxisSelectedMaxIdx index of selected x-axis range max value
@@ -188,20 +188,20 @@ export default class LineChartOperations {
    * or 'undefined' if there is no data available to be plotted in the chart (to be interpreted as "no data available")
    */
   public static getHighChartOptions(
-    data: LineChartData,
+    data: ContinuousChartData,
     xAxisSelectedMinIdx?: number,
     xAxisSelectedMaxIdx?: number,
     barChart?: boolean
   ): Highcharts.Options | undefined {
     // get selected x-axis range min and max values
-    const xAxisDistinctValues = LineChartOperations.getDistinctXAxisValues(data);
+    const xAxisDistinctValues = ContinuousChartOperations.getDistinctXAxisValues(data);
     const xAxisSelectedMin = xAxisSelectedMinIdx !== undefined ? xAxisDistinctValues[xAxisSelectedMinIdx] : undefined;
     const xAxisSelectedMax = xAxisSelectedMaxIdx !== undefined ? xAxisDistinctValues[xAxisSelectedMaxIdx] : undefined;
 
     // parsing all given data series
     const series: SeriesOptionsType[] = [];
-    const defaultLineColors = LineChartOperations.getLineColorList();
-    const defaultPredictionsDashStyles = LineChartOperations.getPredictionsDashStyles();
+    const defaultLineColors = ContinuousChartOperations.getLineColorList();
+    const defaultPredictionsDashStyles = ContinuousChartOperations.getPredictionsDashStyles();
     let atLeastOneSeriesAvailable = false;
     for (let i = 0; i < data.lines.length; i += 1) {
       const lineData = data.lines[i];
@@ -388,7 +388,7 @@ export default class LineChartOperations {
             fontSize: '0.7rem',
           },
           formatter() {
-            return LineChartOperations.chartXAxisFormatter(data.xAxisType, this.value);
+            return ContinuousChartOperations.chartXAxisFormatter(data.xAxisType, this.value);
           },
         },
         lineColor: getTailwindColor('--nextui-chartsXAxisLine'),
@@ -419,7 +419,7 @@ export default class LineChartOperations {
       tooltip: {
         shared: true,
         formatter() {
-          return LineChartOperations.chartTooltipFormatter(data.xAxisType, this.x, this.points);
+          return ContinuousChartOperations.chartTooltipFormatter(data.xAxisType, this.x, this.points);
         },
         backgroundColor: getTailwindColor('--nextui-chartsLegendBackground'),
         style: {
diff --git a/src/operations/comparison-portal/CountryComparisonOperations.tsx b/src/operations/comparison-portal/CountryComparisonOperations.tsx
index 9b54633b..b640d179 100644
--- a/src/operations/comparison-portal/CountryComparisonOperations.tsx
+++ b/src/operations/comparison-portal/CountryComparisonOperations.tsx
@@ -2,12 +2,12 @@ import { Spacer } from '@nextui-org/react';
 import { UseQueryResult } from '@tanstack/react-query';
 
 import { CategoricalChart } from '@/components/Charts/CategoricalChart';
-import { LineChart } from '@/components/Charts/LineChart';
+import { ContinuousChart } from '@/components/Charts/ContinuousChart';
 import NoDataHint from '@/components/ComparisonPortal/NoDataHint';
 import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
 import { AccordionItemProps } from '@/domain/entities/accordions/Accordions';
 import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData';
-import { LineChartData } from '@/domain/entities/charts/LineChartData';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { ChartData } from '@/domain/entities/common/ChartData.ts';
 import { CountryComparisonChartData } from '@/domain/entities/comparison/CountryComparisonChartdata';
 import { CountryComparisonData } from '@/domain/entities/comparison/CountryComparisonData';
@@ -15,16 +15,16 @@ import { CountryDataRecord } from '@/domain/entities/country/CountryData';
 import { CountryIso3DataRecord } from '@/domain/entities/country/CountryIso3Data.ts';
 import { CountryMapData } from '@/domain/entities/country/CountryMapData';
 import { SNACKBAR_SHORT_DURATION } from '@/domain/entities/snackbar/Snackbar';
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 import { SnackbarPosition, SnackbarStatus } from '@/domain/enums/Snackbar';
 import { SnackbarProps } from '@/domain/props/SnackbarProps';
 import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
 import { formatToMillion } from '@/utils/formatting.ts';
 
 export class CountryComparisonOperations {
-  static getFcsChartData(countryDataList: CountryDataRecord[], countryMapData: CountryMapData[]): LineChartData {
+  static getFcsChartData(countryDataList: CountryDataRecord[], countryMapData: CountryMapData[]): ContinuousChartData {
     return this.chartWithoutEmptyLines({
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: countryDataList.map((countryData) => ({
@@ -40,9 +40,9 @@ export class CountryComparisonOperations {
     });
   }
 
-  static getRcsiChartData(countryDataList: CountryDataRecord[], countryMapData: CountryMapData[]): LineChartData {
+  static getRcsiChartData(countryDataList: CountryDataRecord[], countryMapData: CountryMapData[]): ContinuousChartData {
     return this.chartWithoutEmptyLines({
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: countryDataList.map((countryData) => ({
@@ -110,9 +110,9 @@ export class CountryComparisonOperations {
   static getBalanceOfTradeData(
     countryIso3DataList: CountryIso3DataRecord[],
     selectedCountries: CountryMapData[]
-  ): LineChartData {
+  ): ContinuousChartData {
     return this.chartWithoutEmptyLines({
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: countryIso3DataList.map((countryIso3Data) => ({
@@ -128,9 +128,9 @@ export class CountryComparisonOperations {
     countryIso3DataList: CountryIso3DataRecord[],
     selectedCountries: CountryMapData[],
     type: 'headline' | 'food'
-  ): LineChartData {
+  ): ContinuousChartData {
     return this.chartWithoutEmptyLines({
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Rate in %',
       lines: countryIso3DataList
@@ -152,7 +152,7 @@ export class CountryComparisonOperations {
     return countryMapData.find((country) => country.properties.iso3 === iso3)?.properties.adm0_name || '';
   }
 
-  static chartWithoutEmptyLines(chart: LineChartData): LineChartData {
+  static chartWithoutEmptyLines(chart: ContinuousChartData): ContinuousChartData {
     return {
       ...chart,
       lines: chart.lines.filter((line) => line.dataPoints.length > 0),
@@ -250,7 +250,7 @@ export class CountryComparisonOperations {
           <div>
             {fcsChartData && (
               <>
-                <LineChart
+                <ContinuousChart
                   title="Trend of the number of people with insufficient food consumption"
                   data={fcsChartData}
                   small
@@ -267,7 +267,7 @@ export class CountryComparisonOperations {
             <Spacer y={6} />
             {rcsiChartData && (
               <>
-                <LineChart
+                <ContinuousChart
                   title="Trend of the number of people using crisis or above crisis food-based coping"
                   data={rcsiChartData}
                   small
@@ -311,7 +311,7 @@ export class CountryComparisonOperations {
           <div>
             {balanceOfTradeData && (
               <>
-                <LineChart data={balanceOfTradeData} small noPadding transparentBackground />
+                <ContinuousChart data={balanceOfTradeData} small noPadding transparentBackground />
                 <NoDataHint
                   chartData={balanceOfTradeData}
                   selectedCountryNames={selectedCountryNames}
@@ -330,7 +330,7 @@ export class CountryComparisonOperations {
           <div>
             {headlineInflationData && (
               <>
-                <LineChart
+                <ContinuousChart
                   title="Headline Inflation"
                   data={headlineInflationData}
                   small
@@ -346,7 +346,13 @@ export class CountryComparisonOperations {
             )}
             {foodInflationData && (
               <>
-                <LineChart title="Food Inflation" data={foodInflationData} small noPadding transparentBackground />
+                <ContinuousChart
+                  title="Food Inflation"
+                  data={foodInflationData}
+                  small
+                  noPadding
+                  transparentBackground
+                />
                 <NoDataHint
                   chartData={foodInflationData}
                   selectedCountryNames={selectedCountryNames}
diff --git a/src/operations/map/FcsAccordionOperations.tsx b/src/operations/map/FcsAccordionOperations.tsx
index 7a86f439..b2bef157 100644
--- a/src/operations/map/FcsAccordionOperations.tsx
+++ b/src/operations/map/FcsAccordionOperations.tsx
@@ -1,21 +1,21 @@
 import { ReactNode } from 'react';
 
 import { BalanceOfTradeGraph } from '@/domain/entities/charts/BalanceOfTradeGraph';
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { CurrencyExchangeGraph } from '@/domain/entities/charts/CurrencyExchangeGraph';
 import { InflationGraphs } from '@/domain/entities/charts/InflationGraphs';
-import { LineChartData } from '@/domain/entities/charts/LineChartData';
 import { CountryData } from '@/domain/entities/country/CountryData';
 import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data';
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 import { formatToMillion } from '@/utils/formatting';
 
 export class FcsAccordionOperations {
-  static getFcsChartData(countryData?: CountryData): LineChartData | null {
+  static getFcsChartData(countryData?: CountryData): ContinuousChartData | null {
     if (!countryData?.fcsGraph) {
       return null;
     }
     return {
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: [
@@ -33,12 +33,12 @@ export class FcsAccordionOperations {
     };
   }
 
-  static getRcsiChartData(countryData?: CountryData): LineChartData | null {
+  static getRcsiChartData(countryData?: CountryData): ContinuousChartData | null {
     if (!countryData?.rcsiGraph) {
       return null;
     }
     return {
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: [
@@ -61,7 +61,7 @@ export class FcsAccordionOperations {
       return null;
     }
     return {
-      type: LineChartDataType.BALANCE_OF_TRADE_CHART,
+      type: ContinuousChartDataType.BALANCE_OF_TRADE_CHART,
       data: countryIso3Data.balanceOfTradeGraph.data,
     };
   }
@@ -77,7 +77,7 @@ export class FcsAccordionOperations {
     }
 
     return {
-      type: LineChartDataType.INFLATION_CHARTS,
+      type: ContinuousChartDataType.INFLATION_CHARTS,
       headline: {
         data: headlineData,
       },
@@ -96,7 +96,7 @@ export class FcsAccordionOperations {
       return null;
     }
     return {
-      type: LineChartDataType.CURRENCY_EXCHANGE_CHART,
+      type: ContinuousChartDataType.CURRENCY_EXCHANGE_CHART,
       name,
       source,
       updated,
diff --git a/src/operations/map/FcsRegionTooltipOperations.ts b/src/operations/map/FcsRegionTooltipOperations.ts
index 05e8eaea..0b1f1857 100644
--- a/src/operations/map/FcsRegionTooltipOperations.ts
+++ b/src/operations/map/FcsRegionTooltipOperations.ts
@@ -1,12 +1,12 @@
+import { ContinuousChartData } from '@/domain/entities/charts/ContinuousChartData.ts';
 import { FcsChartData } from '@/domain/entities/charts/FcsChartData';
-import { LineChartData } from '@/domain/entities/charts/LineChartData';
-import { LineChartDataType } from '@/domain/enums/LineChartDataType';
+import { ContinuousChartDataType } from '@/domain/enums/ContinuousChartDataType.ts';
 import { formatToMillion } from '@/utils/formatting';
 
 export class FcsRegionTooltipOperations {
-  static getFcsChartData(chartData: FcsChartData[]): LineChartData {
+  static getFcsChartData(chartData: FcsChartData[]): ContinuousChartData {
     return {
-      type: LineChartDataType.LINE_CHART_DATA,
+      type: ContinuousChartDataType.LINE_CHART_DATA,
       xAxisType: 'datetime',
       yAxisLabel: 'Mill',
       lines: [

From 423616b5a445963e65a85de4416c6f94a04d0fa2 Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Sat, 21 Dec 2024 16:21:10 +0100
Subject: [PATCH 6/8] feat: split and refactor

---
 .../charts/ContinuousChartOperations.ts       | 168 +++++++++++-------
 1 file changed, 103 insertions(+), 65 deletions(-)

diff --git a/src/operations/charts/ContinuousChartOperations.ts b/src/operations/charts/ContinuousChartOperations.ts
index a8066a16..35ddbaa8 100644
--- a/src/operations/charts/ContinuousChartOperations.ts
+++ b/src/operations/charts/ContinuousChartOperations.ts
@@ -165,8 +165,8 @@ export default class ContinuousChartOperations {
    */
   public static getDistinctXAxisValues(data: ContinuousChartData): number[] {
     const uniqueXValues = new Set<number>();
-    data.lines.forEach((line) => {
-      line.dataPoints?.forEach((point) => {
+    data.lines.forEach((l) => {
+      l.dataPoints?.forEach((point) => {
         uniqueXValues.add(point.x); // Add x-value to the Set
       });
     });
@@ -227,54 +227,40 @@ export default class ContinuousChartOperations {
       }
 
       // collect series data
-      const seriesData: Highcharts.PointOptionsObject[] = [];
+      const categoryData: Highcharts.PointOptionsObject[] = [];
       lineData.dataPoints?.forEach((p) => {
         // check if datapoint x is in selected x-axis range
         if (xAxisSelectedMin !== undefined && xAxisSelectedMax !== undefined) {
           if (p.x < xAxisSelectedMin || xAxisSelectedMax < p.x) return;
         }
-        seriesData.push({
+        categoryData.push({
           x: p.x,
           y: p.y,
         });
       });
       // make sure data is sorted (required by highchart)
-      seriesData.sort((a, b) => a.x! - b.x!);
+      categoryData.sort((a, b) => a.x! - b.x!);
 
-      if (seriesData.length > 0) atLeastOneSeriesAvailable = true;
+      if (categoryData.length > 0) atLeastOneSeriesAvailable = true;
 
       // build series object for highchart
       if (barChart) {
         // plot series as bars
-        series.push({
-          name: lineData.name,
-          type: 'column',
-          data: seriesData,
-          color:
-            // if the dashStyle is not solid we fill the bars with diagonal lines
-            categoryDashStyle !== 'Solid'
-              ? {
-                  pattern: {
-                    path: {
-                      d: 'M 0 0 L 8 8 M -8 8 L 8 -8',
-                      stroke: categoryColor,
-                      strokeWidth: 1,
-                    },
-                    width: 8,
-                    height: 8,
-                  },
-                }
-              : categoryColor,
-          opacity: lineData.showRange ? 0.75 : 1,
-          borderColor: categoryColor,
-          dashStyle: 'Solid',
-        });
+        series.push(
+          ContinuousChartOperations.createBarSeries(
+            lineData.name,
+            categoryData,
+            categoryDashStyle,
+            categoryColor,
+            lineData.showRange
+          )
+        );
       } else {
         // plot series as line
         series.push({
           type: 'line',
           name: lineData.name,
-          data: seriesData,
+          data: categoryData,
           color: categoryColor,
           dashStyle: categoryDashStyle,
         });
@@ -327,41 +313,8 @@ export default class ContinuousChartOperations {
     if (!atLeastOneSeriesAvailable) return undefined;
 
     // build all vertical lines and plot bands
-    const verticalBands = data.verticalBands ? [...data.verticalBands] : [];
-    const verticalLines = data.verticalLines ? [...data.verticalLines] : [];
-    if (data.predictionVerticalLineX) {
-      // get max x value
-      const xMax = Math.max(...data.lines.flatMap((l) => l.dataPoints.map((p) => p.x)));
-      verticalBands.push({
-        xStart: data.predictionVerticalLineX,
-        xEnd: xMax,
-        label: 'Future',
-      });
-    }
-    if (data.predictionVerticalLineX) {
-      verticalLines.push({
-        x: data.predictionVerticalLineX,
-      });
-    }
-    const plotBands = verticalBands.map((b) => ({
-      from: b.xStart,
-      to: b.xEnd,
-      color: b.color || 'rgba(140,140,140,0.07)',
-      zIndex: 1,
-      label: {
-        text: b.label || '',
-        style: {
-          color: getTailwindColor('--nextui-secondary'),
-          fontSize: '0.7rem',
-        },
-      },
-    }));
-    const plotLines = verticalLines.map((l) => ({
-      value: l.x,
-      color: l.color || getTailwindColor('--nextui-chartsGridLine'),
-      dashStyle: l.dashStyle,
-      zIndex: 2,
-    }));
+    const plotBands = ContinuousChartOperations.buildPlotBands(data);
+    const plotLines = ContinuousChartOperations.buildVerticalPlotLines(data);
 
     // constructing the final HighCharts.Options
     return {
@@ -476,4 +429,89 @@ export default class ContinuousChartOperations {
       },
     };
   }
+
+  /**
+   * Helper function exclusively for ContinuousChartOperations.getHighChartOptions.
+   */
+  private static createBarSeries(
+    name: string,
+    data: Highcharts.PointOptionsObject[],
+    categoryDashStyle: DashStyleValue,
+    categoryColor: string | undefined,
+    showRange: boolean | undefined
+  ): Highcharts.SeriesOptionsType {
+    return {
+      name,
+      type: 'column',
+      data,
+      color:
+        // if the dashStyle is not solid we fill the bars with diagonal lines
+        categoryDashStyle !== 'Solid'
+          ? {
+              pattern: {
+                path: {
+                  d: 'M 0 0 L 8 8 M -8 8 L 8 -8',
+                  stroke: categoryColor,
+                  strokeWidth: 1,
+                },
+                width: 8,
+                height: 8,
+              },
+            }
+          : categoryColor,
+      opacity: showRange ? 0.75 : 1,
+      borderColor: categoryColor,
+      dashStyle: 'Solid',
+    };
+  }
+
+  /**
+   * Helper function exclusively for ContinuousChartOperations.getHighChartOptions.
+   * Building all chart 'bands'.
+   */
+  private static buildPlotBands(chartData: ContinuousChartData) {
+    const verticalBands = chartData.verticalBands ? [...chartData.verticalBands] : [];
+    if (chartData.predictionVerticalLineX) {
+      // if a predictionVerticalLineX is given we create a grey band from predictionVerticalLineX to the end of the chart
+      const xMax = Math.max(...chartData.lines.flatMap((l) => l.dataPoints.map((p) => p.x)));
+      verticalBands.push({
+        xStart: chartData.predictionVerticalLineX,
+        xEnd: xMax,
+        label: 'Future',
+      });
+    }
+    return verticalBands.map((b) => ({
+      from: b.xStart,
+      to: b.xEnd,
+      color: b.color || 'rgba(140,140,140,0.07)',
+      zIndex: 1,
+      label: {
+        text: b.label || '',
+        style: {
+          color: getTailwindColor('--nextui-secondary'),
+          fontSize: '0.7rem',
+        },
+      },
+    }));
+  }
+
+  /**
+   * Helper function exclusively for ContinuousChartOperations.getHighChartOptions.
+   * Building all chart 'vertical lines'.
+   */
+  private static buildVerticalPlotLines(chartData: ContinuousChartData) {
+    const verticalLines = chartData.verticalLines ? [...chartData.verticalLines] : [];
+    if (chartData.predictionVerticalLineX) {
+      // if a predictionVerticalLineX is given we create a grey vertical "dividing" line at predictionVerticalLineX
+      verticalLines.push({
+        x: chartData.predictionVerticalLineX,
+      });
+    }
+    return verticalLines.map((l) => ({
+      value: l.x,
+      color: l.color || getTailwindColor('--nextui-chartsGridLine'),
+      dashStyle: l.dashStyle,
+      zIndex: 2,
+    }));
+  }
 }

From 5b07c73ad1a47431957ce9d0b40b8e3c67755b68 Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Sat, 21 Dec 2024 16:41:49 +0100
Subject: [PATCH 7/8] feat: add property to charts to customize the height and
 set a bigger height on FST in country comparison

---
 public/sitemap-0.xml                                  | 11 -----------
 src/components/Charts/CategoricalChart.tsx            |  4 ++++
 src/components/Charts/ContinuousChart.tsx             |  4 ++++
 src/components/Charts/helpers/ChartContainer.tsx      |  5 +++--
 src/domain/props/CategoricalChartProps.tsx            |  1 +
 src/domain/props/ChartContainerProps.tsx              |  1 +
 src/domain/props/ContinuousChartProps.tsx             |  1 +
 .../comparison-portal/CountryComparisonOperations.tsx |  6 +++++-
 8 files changed, 19 insertions(+), 14 deletions(-)
 delete mode 100644 public/sitemap-0.xml

diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
deleted file mode 100644
index 8a098c9d..00000000
--- a/public/sitemap-0.xml
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://localhost:3000/about</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/disclaimer</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/wiki</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/data_sources</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/elements</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/comparison-portal</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://localhost:3000/download-portal</loc><lastmod>2024-12-19T12:36:14.394Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-</urlset>
\ No newline at end of file
diff --git a/src/components/Charts/CategoricalChart.tsx b/src/components/Charts/CategoricalChart.tsx
index ed80743b..05d08646 100644
--- a/src/components/Charts/CategoricalChart.tsx
+++ b/src/components/Charts/CategoricalChart.tsx
@@ -21,6 +21,8 @@ import CategoricalChartOperations from '@/operations/charts/CategoricalChartOper
  * @param small when selected, all components in the line chart box become slightly smaller (optional)
  * @param noPadding when selected, the main box has no padding on all sides (optional)
  * @param transparentBackground when selected, the background of the entire component is transparent (optional)
+ * @param chartHeight with this parameter, the height of the actual chart can be set to a fixed value in pixels. If
+ *        chartHeight is not specified, the chart is given a fixed default height depending on `small`.
  * @param disableExpandable when selected, the functionality to open the chart in a larger modal is disabled (optional)
  * @param disablePieChartSwitch when selected, the functionality to switch to a pie chart is disabled (optional)
  * @param disableDownload when selected, the functionality to download the chart is disabled (optional)
@@ -32,6 +34,7 @@ export function CategoricalChart({
   small,
   noPadding,
   transparentBackground,
+  chartHeight,
   disableExpandable,
   disablePieChartSwitch,
   disableDownload,
@@ -66,6 +69,7 @@ export function CategoricalChart({
       small={small}
       noPadding={noPadding}
       transparentBackground={transparentBackground}
+      chartHeight={chartHeight}
       disableExpandable={disableExpandable}
       disableDownload={disableDownload}
       alternativeSwitchButtonProps={alternativeSwitchButtonProps}
diff --git a/src/components/Charts/ContinuousChart.tsx b/src/components/Charts/ContinuousChart.tsx
index 16b38519..b974e5ff 100644
--- a/src/components/Charts/ContinuousChart.tsx
+++ b/src/components/Charts/ContinuousChart.tsx
@@ -29,6 +29,8 @@ import ContinuousChartOperations from '@/operations/charts/ContinuousChartOperat
  * @param small when selected, all components in the main box become slightly smaller (optional)
  * @param noPadding when selected, the main box has no padding on all sides (optional)
  * @param transparentBackground when selected, the background of the entire component is transparent (optional)
+ * @param chartHeight with this parameter, the height of the actual chart can be set to a fixed value in pixels. If
+ *        chartHeight is not specified, the chart is given a fixed default height depending on `small`.
  * @param disableExpandable when selected, the functionality to open the chart in a larger modal is disabled (optional)
  * @param disableBarChartSwitch when selected, the functionality to switch to a bar chart is disabled (optional)
  * @param disableXAxisSlider when selected, the functionality to change the x-axis range via a slider is disabled (optional)
@@ -41,6 +43,7 @@ export function ContinuousChart({
   small,
   noPadding,
   transparentBackground,
+  chartHeight,
   disableExpandable,
   disableBarChartSwitch,
   disableXAxisSlider,
@@ -117,6 +120,7 @@ export function ContinuousChart({
       small={small}
       noPadding={noPadding}
       transparentBackground={transparentBackground}
+      chartHeight={chartHeight}
       disableExpandable={disableExpandable}
       disableDownload={disableDownload}
       alternativeSwitchButtonProps={alternativeSwitchButtonProps}
diff --git a/src/components/Charts/helpers/ChartContainer.tsx b/src/components/Charts/helpers/ChartContainer.tsx
index 122f6a61..76ea7329 100644
--- a/src/components/Charts/helpers/ChartContainer.tsx
+++ b/src/components/Charts/helpers/ChartContainer.tsx
@@ -32,6 +32,7 @@ export function ChartContainer({
   small,
   noPadding,
   transparentBackground,
+  chartHeight,
   disableExpandable,
   disableDownload,
   alternativeSwitchButtonProps,
@@ -39,7 +40,7 @@ export function ChartContainer({
 }: ChartContainerProps) {
   const TITLE_TEXT_SIZE = small ? 'text-sm' : 'text-md';
   const DESCRIPTION_TEXT_SIZE = small ? 'text-tiny' : 'text-sm';
-  const CHART_HEIGHT = small ? 12 : 16;
+  const CHART_HEIGHT = chartHeight ? `${chartHeight}px` : small ? '12rem' : '16rem';
   const ICON_BUTTON_SIZE = small ? 3 : 4;
   const HEADER_PADDING = title ? 3 : 0;
   const MAIN_BOX_PADDING_FACTOR = noPadding ? 0 : 1;
@@ -148,7 +149,7 @@ export function ChartContainer({
           containerProps={{
             style: {
               width: '100%',
-              height: `${CHART_HEIGHT}rem`,
+              height: CHART_HEIGHT,
               borderRadius: '0 0 0.375rem 0.375rem',
             },
           }}
diff --git a/src/domain/props/CategoricalChartProps.tsx b/src/domain/props/CategoricalChartProps.tsx
index bcd2fb53..848337e5 100644
--- a/src/domain/props/CategoricalChartProps.tsx
+++ b/src/domain/props/CategoricalChartProps.tsx
@@ -9,6 +9,7 @@ export default interface CategoricalChartProps {
   small?: boolean;
   noPadding?: boolean;
   transparentBackground?: boolean;
+  chartHeight?: number;
 
   disableExpandable?: boolean;
   disablePieChartSwitch?: boolean;
diff --git a/src/domain/props/ChartContainerProps.tsx b/src/domain/props/ChartContainerProps.tsx
index f274b9dd..5ae31e9d 100644
--- a/src/domain/props/ChartContainerProps.tsx
+++ b/src/domain/props/ChartContainerProps.tsx
@@ -52,6 +52,7 @@ export default interface ChartContainerProps {
   small?: boolean;
   noPadding?: boolean;
   transparentBackground?: boolean;
+  chartHeight?: number;
 
   disableExpandable?: boolean;
   disableDownload?: boolean;
diff --git a/src/domain/props/ContinuousChartProps.tsx b/src/domain/props/ContinuousChartProps.tsx
index 6db8fbcd..a554b98c 100644
--- a/src/domain/props/ContinuousChartProps.tsx
+++ b/src/domain/props/ContinuousChartProps.tsx
@@ -12,6 +12,7 @@ export default interface ContinuousChartProps {
   small?: boolean;
   noPadding?: boolean;
   transparentBackground?: boolean;
+  chartHeight?: number;
 
   disableExpandable?: boolean;
   disableBarChartSwitch?: boolean;
diff --git a/src/operations/comparison-portal/CountryComparisonOperations.tsx b/src/operations/comparison-portal/CountryComparisonOperations.tsx
index b640d179..2c6e9585 100644
--- a/src/operations/comparison-portal/CountryComparisonOperations.tsx
+++ b/src/operations/comparison-portal/CountryComparisonOperations.tsx
@@ -256,6 +256,7 @@ export class CountryComparisonOperations {
                   small
                   noPadding
                   transparentBackground
+                  chartHeight={300}
                 />
                 <NoDataHint
                   chartData={fcsChartData}
@@ -273,6 +274,7 @@ export class CountryComparisonOperations {
                   small
                   noPadding
                   transparentBackground
+                  chartHeight={300}
                 />
                 <NoDataHint
                   chartData={rcsiChartData}
@@ -311,7 +313,7 @@ export class CountryComparisonOperations {
           <div>
             {balanceOfTradeData && (
               <>
-                <ContinuousChart data={balanceOfTradeData} small noPadding transparentBackground />
+                <ContinuousChart data={balanceOfTradeData} small noPadding transparentBackground chartHeight={300} />
                 <NoDataHint
                   chartData={balanceOfTradeData}
                   selectedCountryNames={selectedCountryNames}
@@ -336,6 +338,7 @@ export class CountryComparisonOperations {
                   small
                   noPadding
                   transparentBackground
+                  chartHeight={300}
                 />
                 <NoDataHint
                   chartData={headlineInflationData}
@@ -352,6 +355,7 @@ export class CountryComparisonOperations {
                   small
                   noPadding
                   transparentBackground
+                  chartHeight={300}
                 />
                 <NoDataHint
                   chartData={foodInflationData}

From 5562950b137c4eb724ed86d25ea61566dd1efa3d Mon Sep 17 00:00:00 2001
From: plaume8 <linus.sander@icloud.com>
Date: Sat, 21 Dec 2024 16:51:24 +0100
Subject: [PATCH 8/8] fix: reset sitemap.xml to original

---
 public/sitemap.xml | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/sitemap.xml b/public/sitemap.xml
index ea931a40..7e94ce6c 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,4 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<sitemap><loc>https://localhost:3000/sitemap-0.xml</loc></sitemap>
-</sitemapindex>
\ No newline at end of file
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url><loc>https://localhost:3000/about</loc><lastmod>2024-12-17T19:34:24.137Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/data_sources</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/elements</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/disclaimer</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/wiki</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://localhost:3000/download-portal</loc><lastmod>2024-12-17T19:34:24.138Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+</urlset>
\ No newline at end of file