diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json
index 7ed9706b..90c47934 100644
--- a/packages/demo/public/options.json
+++ b/packages/demo/public/options.json
@@ -1,19 +1,58 @@
-{"chartOptions": 
-    {
+{
+    "chartOptions": {
+        "patients": {
+            "legendMapping": {
+                "berlin": "Berlin",
+                "bonn": "Bonn",
+                "dresden": "Dresden",
+                "essen": "Essen",
+                "frankfurt": "Frankfurt",
+                "freiburg": "Freiburg",
+                "hannover": "Hannover",
+                "mainz": "Mainz",
+                "muenchen-lmu": "München(LMU)",
+                "muenchen-tum": "München(TUM)",
+                "ulm": "Ulm",
+                "wuerzburg": "Würzburg",
+                "mannheim": "Mannheim",
+                "dktk-test": "DKTK-Test",
+                "hamburg": "Hamburg"
+            }
+        },
+        "gender": {
+            "legendMapping": {
+                "male": "Männlich",
+                "female": "Weiblich",
+                "unknown": "Unbekannt",
+                "other": "Divers"
+            }
+        },
         "diagnosis": {
-            "hintText": ["Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."]
+            "hintText": [
+                "Bei Patienten mit mehreren onkologischen Diagnosen werden auch Einträge angezeigt, die ggfs. nicht den ausgewählten Suchkriterien entsprechen."
+            ]
         },
         "age_at_diagnosis": {
-            "hintText": ["Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "]
+            "hintText": [
+                "Bei Patienten mit mehreren Erstdiagnosen werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen. "
+            ]
         },
         "75186-7": {
-            "hintText": ["\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.", "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.", "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."]
+            "hintText": [
+                "\"verstorben\": ein Todesdatum ist dokumentiert oder das aktuelle Lebensalter ist größer 123 Jahre.",
+                "\"lebend\": wird angenommen, wenn kein Todesdatum dokumentiert ist oder das aktuelle Lebensalter nicht 123 Jahre überschritten hat.",
+                "\"unbekannt\": kein Geburtsdatum oder Todesdatum bekannt."
+            ]
         },
         "medicationStatements": {
-            "hintText": ["Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"]
+            "hintText": [
+                "Art der systemischen oder abwartenden Therapie (ADT Basisdatensatz Versionen 2014, 2021)"
+            ]
         },
         "sample_kind": {
-            "hintText":["Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."]
-        } 
+            "hintText": [
+                "Verteilung der Bioprobentypen der Patienten gemäß der ausgewählten Kriterien. Es werden auch Einträge angezeigt, die ggfs. außerhalb der Suchkriterien liegen."
+            ]
+        }
     }
 }
\ No newline at end of file
diff --git a/packages/lib/src/components/results/ChartComponent.wc.svelte b/packages/lib/src/components/results/ChartComponent.wc.svelte
index 0fee1ad0..c087e624 100644
--- a/packages/lib/src/components/results/ChartComponent.wc.svelte
+++ b/packages/lib/src/components/results/ChartComponent.wc.svelte
@@ -51,8 +51,11 @@
     export let groupingLabel: string = "";
     export let viewScales: boolean = chartType !== "pie" ? true : false;
 
-    let options: any
-    $: options = $lensOptions?.chartOptions && $lensOptions?.chartOptions[catalogueGroupCode] || {}
+    let options: any;
+    $: options =
+        ($lensOptions?.chartOptions &&
+            $lensOptions?.chartOptions[catalogueGroupCode]) ||
+        {};
 
     export let backgroundColor: string[] = [
         "#4dc9f6",
@@ -107,43 +110,56 @@
                     position: "bottom",
                 },
                 tooltip: {
-                   callbacks: {
-                       title: (context: any) => {
-                           const key = context[0].label || '';
-                           let result = (tooltips.get(key))
-                                      ? tooltips.get(key) : key;
-                           return result
-                       }
-                   }
-                }
+                    callbacks: {
+                        title: (context: any) => {
+                            const key = context[0].label || "";
+                            let result = tooltips.get(key)
+                                ? tooltips.get(key)
+                                : key;
+                            return result;
+                        },
+                    },
+                },
             },
             scales: {
                 y: {
                     display: viewScales,
                     title: {
                         display: true,
-                        text: yAxisTitle
+                        text: yAxisTitle,
                     },
                 },
                 x: {
                     display: viewScales,
                     title: {
                         display: true,
-                        text: xAxisTitle
+                        text: xAxisTitle,
                     },
-                    ticks: (chartType === "bar") ? {
-                        callback: (val: any) => {
-                            if(indexAxis === 'y') return val.toString()
-                            if (typeof val === 'string') return val
-                            const key: unknown = (initialChartData.data.labels[val]) !== undefined
-                                ? initialChartData.data.labels[val] : val.toString();
-                            if (typeof key !== 'string') return val.toString()
-                            let result = (headers.get(key)) ? headers.get(key) : key;
-                            return result
-                        }
-                    } : []
-                }
-            }
+                    ticks:
+                        chartType === "bar"
+                            ? {
+                                  callback: (val: any) => {
+                                      if (indexAxis === "y")
+                                          return val.toString();
+                                      if (typeof val === "string") return val;
+                                      const key: unknown =
+                                          initialChartData.data.labels[val] !==
+                                          undefined
+                                              ? initialChartData.data.labels[
+                                                    val
+                                                ]
+                                              : val.toString();
+                                      if (typeof key !== "string")
+                                          return val.toString();
+                                      let result = headers.get(key)
+                                          ? headers.get(key)
+                                          : key;
+                                      return result;
+                                  },
+                              }
+                            : [],
+                },
+            },
         },
     };
 
@@ -363,11 +379,20 @@
                  */
                 if (isNaN(parseInt(label))) return label;
 
-                return `${parseInt(label)} - ${parseInt(label) + groupRange - 1}`;
+                return `${parseInt(label)} - ${
+                    parseInt(label) + groupRange - 1
+                }`;
             });
         }
 
-        chart.data.labels = chartLabels;
+        /**
+         * set the labels of the chart
+         * if a legend mapping is set, use the legend mapping
+         */
+        chart.data.labels = options.legendMapping ? chartLabels.map(label => {
+            console.log(label, options )
+            return options.legendMapping[label]
+        }): chartLabels;
 
         chart.update();
     };
@@ -389,10 +414,15 @@
         if (a !== "unknown" && b === "unknown") {
             return -1;
         }
-        // Convert values to numbers for numeric comparison
-        const numA = parseInt(a, 10);
-        const numB = parseInt(b, 10);
-        return numA - numB;
+        // Convert numeric values to numbers for comparison
+        if(!isNaN(a) && !isNaN(b)) {
+            a = parseInt(a, 10);
+            b = parseInt(b, 10);
+        }
+        
+        return a > b ? 1 : -1;
+
+
     };
 
     /**
@@ -426,7 +456,10 @@
                                         name: `${label}`,
                                         value: {
                                             min: parseInt(label),
-                                            max: parseInt(label) + groupRange - 1,
+                                            max:
+                                                parseInt(label) +
+                                                groupRange -
+                                                1,
                                         },
                                         queryBindId: uuidv4(),
                                     },
@@ -477,7 +510,7 @@
 <div part="chart-wrapper">
     <h4 part="chart-title">{title}</h4>
     {#if options.hintText}
-        <InfoButtonComponent message={options.hintText}/>
+        <InfoButtonComponent message={options.hintText} />
     {/if}
     <canvas
         part="chart-canvas"