diff --git a/index.html b/index.html
index da5cae0..41de275 100644
--- a/index.html
+++ b/index.html
@@ -21,22 +21,27 @@
         title: 'Line Chart with time on x and sliders',
         geochart: {
           borderWidth: 2,
+          useSteps: "after",
           xAxis: {
             type: 'time',
-            unit: 'month',
             property: 'CollectionStart_DebutPrelevement',
             usePalette: false
           },
           yAxis: {
-            property: 'Activity_Activite_mBqm3'
+            type: 'linear',
+            property: 'Activity_Activite_mBqm3',
           },
           xSlider: {
             display: true,
           },
           ySlider: {
             display: true,
+            step: 0.1
           }
         },
+        ui: {
+          stepsSwitcher: true
+        },
         category: {
           property: 'Radionuclide_Radionucleide',
           usePalette: false
@@ -165,11 +170,11 @@
           tension: 0.3,
           xAxis: {
             type: 'time',
-            unit: 'month',
             property: 'CollectionStart_DebutPrelevement',
             usePalette: false
           },
           yAxis: {
+            type: 'logarithmic',
             property: 'Activity_Activite_mBqm3'
           },
           xSlider: {
@@ -177,6 +182,7 @@
           },
           ySlider: {
             display: true,
+            step: 0.1
           }
         },
         category: {
@@ -761,6 +767,13 @@
         <div style="text-align: left;">
           GEOCHART INPUTS <span style="font-size: small;">(these parameters will be parsed and sent to the Chart.js props on the right and GeoChart created below)</span>
         </div>
+        <div>
+          <span>Language: </span>
+          <select id="lang" onChange="languageChanged()">
+            <option selected value="en">English</option>
+            <option value="fr">Français</option>
+          </select>
+        </div>
         <div>
           <div>
             <button onclick="importDataInputs(DATA_INPUT_LINE_1)">Import Data LINE w/ time w/sliders</button>
@@ -823,9 +836,9 @@
     <div id="root2aca7b6b288c" style="position: relative; width: 800px;"></div>
     <div>
       <button onclick="redrawChart()" style="padding:5px;"><strong>Looks weird? Redraw!</strong></button>
-      <button onclick="isLoadingChart()" style="padding:5px;"><strong>Sim. loading whole chart</strong></button>
-      <button onclick="isLoadingDatasource()" style="padding:5px;"><strong>Sim. lazy loading of datasource</strong></button>
-      <button onclick="isLoadingClear()" style="padding:5px;"><strong>Clear loading sim.</strong></button>
+      <button onclick="isLoadingState(1)" style="padding:5px;"><strong>Sim. loading whole chart</strong></button>
+      <button onclick="isLoadingState(2)" style="padding:5px;"><strong>Sim. lazy loading of datasource</strong></button>
+      <button onclick="isLoadingState(0)" style="padding:5px;"><strong>Clear loading sim.</strong></button>
     </div>
 
     <script>
@@ -890,19 +903,14 @@
         window.dispatchEvent(new CustomEvent("chart/redraw"));
       }
 
-      function isLoadingChart() {
-        // Emit a Chart Redraw event so the chart updates
-        window.dispatchEvent(new CustomEvent("chart/isLoading", { detail: { state: 1 } }));
-      }
-
-      function isLoadingDatasource() {
-        // Emit a Chart Redraw event so the chart updates
-        window.dispatchEvent(new CustomEvent("chart/isLoading", { detail: { state: 2 } }));
+      function languageChanged() {
+        // Emit a Chart Language changed event so the chart updates
+        window.dispatchEvent(new CustomEvent("chart/language", { detail: { language: event.target.value } }));
       }
 
-      function isLoadingClear() {
+      function isLoadingState(state) {
         // Emit a Chart Redraw event so the chart updates
-        window.dispatchEvent(new CustomEvent("chart/isLoading", { detail: { state: 0 } }));
+        window.dispatchEvent(new CustomEvent("chart/isLoading", { detail: { state: state } }));
       }
 
       function handleChartLoaded(e) {
diff --git a/locales/en/translation.json b/locales/en/translation.json
new file mode 100644
index 0000000..527e6d7
--- /dev/null
+++ b/locales/en/translation.json
@@ -0,0 +1,9 @@
+{
+  "geochart": {
+    "feature": "Feature",
+    "steps": "Steps",
+    "category": "Category",
+    "parsingError": "There was an error parsing the Chart inputs.",
+    "viewConsoleDetails": "View console for details."
+  }
+}
\ No newline at end of file
diff --git a/locales/fr/translation.json b/locales/fr/translation.json
new file mode 100644
index 0000000..e0bc574
--- /dev/null
+++ b/locales/fr/translation.json
@@ -0,0 +1,9 @@
+{
+  "geochart": {
+    "feature": "Enregistrement",
+    "steps": "Marches",
+    "category": "Catégorie",
+    "parsingError": "Une erreur est survenue lors de la lecture des paramètres.",
+    "viewConsoleDetails": "Voir détails dans la console."
+  }
+}
\ No newline at end of file
diff --git a/schema-chartjs-data.json b/schema-chartjs-data.json
index e7861f9..f550146 100644
--- a/schema-chartjs-data.json
+++ b/schema-chartjs-data.json
@@ -63,7 +63,6 @@
                           "type": "string"
                         }
                       ]
-                      
                     }
                   },
                   "required": ["x", "y"]
@@ -104,9 +103,9 @@
             "type": "integer"
           },
           "stepped": {
-            "type": "string",
-            "enum": ["before", "after", "middle", "true", "false"],
-            "default": "false"
+            "type": ["string", "boolean"],
+            "enum": ["before", "after", "middle", false],
+            "default": false
           }
         },
         "required": ["data"]
diff --git a/src/app.tsx b/src/app.tsx
index 359cc43..1f1d6fa 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,5 @@
 import { GeoChart } from './chart';
-import { ChartType, ChartData, ChartOptions } from './chart-types';
+import { GeoChartConfig, ChartType, ChartOptions, ChartData, GeoChartAction, DefaultDataPoint } from './chart-types';
 import { SchemaValidator, ValidatorResult } from './chart-schema-validator';
 
 /**
@@ -20,18 +20,31 @@ export function App(props: TypeAppProps): JSX.Element {
   const w = window as any;
   // Fetch the cgpv module
   const { cgpv } = w;
-  const { react } = cgpv;
-  const { useEffect, useState } = react;
+  const { react, useTranslation } = cgpv;
+  const { useEffect, useState, useCallback } = react;
   const { schemaValidator } = props;
 
-  // Wire handler
-  const [inputs, setInputs] = useState();
-  const [chart, setChart] = useState();
-  const [data, setData] = useState();
-  const [options, setOptions] = useState();
-  const [action, setAction] = useState();
-  const [isLoadingChart, setIsLoadingChart] = useState();
-  const [isLoadingDatasource, setIsLoadingDatasource] = useState();
+  // Translation
+  const { t, i18n } = useTranslation();
+
+  /** ****************************************** USE STATE SECTION START ************************************************ */
+
+  const [inputs, setInputs] = useState() as [
+    GeoChartConfig<ChartType> | undefined,
+    React.Dispatch<React.SetStateAction<GeoChartConfig<ChartType> | undefined>>
+  ];
+  const [chart, setChart] = useState() as [ChartType, React.Dispatch<React.SetStateAction<ChartType>>];
+  const [data, setData] = useState() as [
+    ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined,
+    React.Dispatch<React.SetStateAction<ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined>>
+  ];
+  const [options, setOptions] = useState() as [ChartOptions | undefined, React.Dispatch<React.SetStateAction<ChartOptions> | undefined>];
+  const [action, setAction] = useState() as [GeoChartAction, React.Dispatch<React.SetStateAction<GeoChartAction>>];
+  const [isLoadingChart, setIsLoadingChart] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  const [isLoadingDatasource, setIsLoadingDatasource] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+
+  /** ****************************************** USE STATE SECTION END ************************************************** */
+  /** *************************************** EVENT HANDLERS SECTION START ********************************************** */
 
   /**
    * Handles when the Chart has to be loaded with data or options.
@@ -43,13 +56,13 @@ export function App(props: TypeAppProps): JSX.Element {
     if (ev.detail.inputs) {
       setInputs(ev.detail.inputs);
     } else {
-      setInputs(null); // Clear
-      if (ev.detail.options) {
-        setOptions(ev.detail.options);
-      }
+      setInputs(undefined); // Clear
       if (ev.detail.chart) {
         setChart(ev.detail.chart);
       }
+      if (ev.detail.options) {
+        setOptions(ev.detail.options);
+      }
       if (ev.detail.data) {
         setData(ev.detail.data);
       }
@@ -65,13 +78,8 @@ export function App(props: TypeAppProps): JSX.Element {
   };
 
   /**
-   * Handles when the Chart has parsed inputs.
+   * Handles when the Chart has to show a loading state.
    */
-  const handleParsed = (theChart: ChartType, theOptions: ChartOptions, theData: ChartData): void => {
-    // Raise event higher
-    window.dispatchEvent(new CustomEvent('chart/parsed', { detail: { chart: theChart, options: theOptions, data: theData } }));
-  };
-
   const handleChartLoading = (e: Event): void => {
     const ev = e as CustomEvent;
 
@@ -81,28 +89,49 @@ export function App(props: TypeAppProps): JSX.Element {
     if (ev.detail.state === 2) setIsLoadingDatasource(true);
   };
 
+  /** **************************************** EVENT HANDLERS SECTION END *********************************************** */
+  /** ******************************************* HOOKS SECTION START *************************************************** */
+
+  /**
+   * Handles when the Chart language is changed.
+   */
+  const handleChartLanguage = useCallback(
+    (e: Event): void => {
+      const ev = e as CustomEvent;
+      i18n.changeLanguage(ev.detail.language);
+    },
+    [i18n]
+  );
+
+  /**
+   * Handles when the Chart has parsed inputs.
+   * We use a 'useCallback' so that any child component with a useEffect dependency on the callback
+   * doesn't get triggered everytime this parent component re-renders and re-generates its stub.
+   */
+  const handleParsed = useCallback((theChart: ChartType, theOptions: ChartOptions, theData: ChartData): void => {
+    // Raise event higher
+    window.dispatchEvent(new CustomEvent('chart/parsed', { detail: { chart: theChart, options: theOptions, data: theData } }));
+  }, []) as (theChart: ChartType, theOptions: ChartOptions, theData: ChartData) => void; // Crazy typing, because can't use the generic version of 'useCallback'
+
   /**
    * Handles an error that happened in the Chart component.
+   * We use a 'useCallback' so that any child component with a useEffect dependency on the callback
+   * doesn't get triggered everytime this parent component re-renders and re-generates its stub.
    * @param dataErrors The data errors that happened (if any)
    * @param optionsErrors The options errors that happened (if any)
    */
-  const handleError = (
-    inputErrors: ValidatorResult | undefined,
-    optionsErrors: ValidatorResult | undefined,
-    dataErrors: ValidatorResult | undefined
-  ): void => {
-    // Gather all error messages
-    const msgs = [];
-    if (inputErrors) msgs.push(inputErrors);
-    if (optionsErrors) msgs.push(optionsErrors);
-    if (dataErrors) msgs.push(dataErrors);
-    const msgAll = SchemaValidator.parseValidatorResultsMessages(msgs);
-
-    // Show the error using an alert. We can't use the cgpv SnackBar as that component is attached to
-    // a map and we're not even running a cgpv.init() at all here.
-    // eslint-disable-next-line no-alert
-    alert(`There was an error parsing the Chart inputs.\n\n${msgAll}\n\nView console for details.`);
-  };
+  const handleError = useCallback(
+    (validators: (ValidatorResult | undefined)[]): void => {
+      // Gather all error messages
+      const msgAll = SchemaValidator.parseValidatorResultsMessages(validators);
+
+      // Show the error using an alert. We can't use the cgpv SnackBar as that component is attached to
+      // a map and we're not even running a cgpv.init() at all here.
+      // eslint-disable-next-line no-alert
+      alert(`${t('geochart.parsingError')}\n\n${msgAll}\n\n${t('geochart.viewConsoleDetails')}`);
+    },
+    [t]
+  ) as (validators: (ValidatorResult | undefined)[]) => void; // Crazy typing, because can't use the generic version of 'useCallback'
 
   // Effect hook to add and remove event listeners.
   // Using window.addEventListener is unconventional here, but this is strictly for the 'app' logic with the index.html.
@@ -110,13 +139,18 @@ export function App(props: TypeAppProps): JSX.Element {
   useEffect(() => {
     window.addEventListener('chart/load', handleChartLoad);
     window.addEventListener('chart/redraw', handleChartRedraw);
+    window.addEventListener('chart/language', handleChartLanguage);
     window.addEventListener('chart/isLoading', handleChartLoading);
     return () => {
       window.removeEventListener('chart/load', handleChartLoad);
       window.removeEventListener('chart/redraw', handleChartRedraw);
+      window.removeEventListener('chart/language', handleChartLanguage);
       window.removeEventListener('chart/isLoading', handleChartLoading);
     };
-  }, [chart, inputs, data, options]);
+  }, [handleChartLanguage]);
+
+  /** ********************************************* HOOKS SECTION END *************************************************** */
+  /** ******************************************** RENDER SECTION START ************************************************* */
 
   // Render the Chart
   return (
diff --git a/src/chart-parsing.ts b/src/chart-parsing.ts
index 43f4b56..b539618 100644
--- a/src/chart-parsing.ts
+++ b/src/chart-parsing.ts
@@ -1,9 +1,8 @@
-import { ChartType, ChartData, ChartDataset, ChartOptions } from 'chart.js';
+import { ChartType, ChartData, ChartDataset, ChartOptions, Tick } from 'chart.js';
 import {
   GeoChartConfig,
   GeoChartXYData,
   GeoDefaultDataPoint,
-  GeoChartDatasource,
   TypeJsonObject,
   GeoChartCategoriesGroup,
   DEFAULT_COLOR_PALETTE_CUSTOM_TRANSPARENT,
@@ -12,6 +11,7 @@ import {
   DEFAULT_COLOR_PALETTE_CUSTOM_ALT_OPAQUE,
   DEFAULT_COLOR_PALETTE_CHARTJS_TRANSPARENT,
   DEFAULT_COLOR_PALETTE_CHARTJS_OPAQUE,
+  DATE_OPTIONS_AXIS,
 } from './chart-types';
 import { isNumber, getColorFromPalette } from './chart-util';
 
@@ -22,14 +22,18 @@ import { isNumber, getColorFromPalette } from './chart-util';
 function sortOnX<TType extends ChartType, TData = GeoDefaultDataPoint<TType>>(datasets: ChartDataset<TType, TData>[]): void {
   // For each dataset
   datasets.forEach((ds: ChartDataset<TType, TData>) => {
-    const dataInDataset = ds.data as { x: number | Date }[];
-    const dataOrdered = dataInDataset.sort((a: { x: number | Date }, b: { x: number | Date }) => {
+    const dataInDataset = ds.data as { x: number | string | Date | undefined }[];
+    const dataOrdered = dataInDataset.sort((a: { x: number | string | Date | undefined }, b: { x: number | string | Date | undefined }) => {
       if (a.x instanceof Date) {
         if ((a.x as Date) === (b.x as Date)) return 0;
         if ((a.x as Date) < (b.x as Date)) return -1;
         return 1;
       }
-      return (a.x as number) - (b.x as number);
+      if (isNumber(a.x) && isNumber(b.x)) return (a.x as number) - (b.x as number);
+      if (a.x && b.x) return (a.x as string).localeCompare(b.x as string);
+      if (!a.x) return -1;
+      if (!b.x) return 1;
+      return 0;
     });
 
     // Replace
@@ -39,7 +43,7 @@ function sortOnX<TType extends ChartType, TData = GeoDefaultDataPoint<TType>>(da
 }
 
 /**
- * Create a GeoChartXYData data value by reading attributes from a TypeJsonObject.
+ * Creates a GeoChartXYData data value by reading attributes from a TypeJsonObject.
  * The GeoChartXYData has x and y properties and functions similar to the DefaultDataPoint, like ChartJS supports, but with additional
  * support of Dates on the 'x' property.
  * @param chartConfig GeoChartConfig<TType> The GeoChart configuration
@@ -47,16 +51,15 @@ function sortOnX<TType extends ChartType, TData = GeoDefaultDataPoint<TType>>(da
  * @returns The GeoChartXYData object
  */
 function createDataXYFormat<TType extends ChartType>(chartConfig: GeoChartConfig<TType>, attributes: TypeJsonObject): GeoChartXYData {
-  // Read the value in x
+  // Read the unknown value in x
   const valRawX: unknown = attributes[chartConfig.geochart.xAxis!.property];
 
   // If the value is expected to be a time
   let xVal: number | Date | string | unknown = valRawX;
-  if (chartConfig.geochart.xAxis?.type === 'time') {
-    // Create a date!
+  if (chartConfig.geochart.xAxis?.type === 'time' || chartConfig.geochart.xAxis?.type === 'timeseries') {
+    // Make sure it's a date object
     if (valRawX instanceof Date) xVal = valRawX as Date;
     if (isNumber(valRawX)) xVal = new Date(valRawX as number);
-    // if (!xVal) throw Error('Unsupported date for x axis');
   }
 
   // Read the value in y, hopefully it's a number, that's what GeoChartXYPair supports for now (there's a TODO there)
@@ -70,7 +73,44 @@ function createDataXYFormat<TType extends ChartType>(chartConfig: GeoChartConfig
 }
 
 /**
- * Create a ChartDataset object, for ChartJS, based on the GeoChart configuration.
+ * Compresses the data for the given dataset in a data array format expected for the Pie/Doughnut charts. This function also
+ * considers the categorization when one must be done.
+ * @param chartConfig GeoChartConfig<TType> The GeoChart configuration
+ * @param dataset ChartDataset<TType, TData> The current dataset being parsed
+ * @param labels string[] The current labels array for the whole Chart (all ChartDatasets) being parsed
+ * @param records TypeJsonObject[] The records for the whole Chart
+ * @returns The TData object representing the expected data array of expected dimension based on the labels array
+ */
+function createDataCompressedForPieDoughnut<
+  TType extends ChartType,
+  TData extends GeoDefaultDataPoint<TType> = GeoDefaultDataPoint<TType>,
+  TLabel extends string = string
+>(chartConfig: GeoChartConfig<TType>, dataset: ChartDataset<TType, TData>, labels: string[], records: TypeJsonObject[]): TData {
+  // Create a new data array of expected length containing only 'null' values
+  const newData: TData = Array.from({ length: labels.length }, () => null) as TData;
+
+  // If categorizing, filter on the current dataset label
+  let subRecords = records;
+  if (chartConfig.category) {
+    subRecords = records.filter((rec: TypeJsonObject) => {
+      return (rec[chartConfig.category!.property] as string as TLabel) === dataset.label;
+    });
+  }
+
+  // For each data to compress in the array
+  subRecords.forEach((rec: TypeJsonObject) => {
+    const valX: TLabel = rec[chartConfig.geochart.xAxis!.property] as string as TLabel;
+    // Find the index for that value
+    const labelIndex = labels!.indexOf(valX);
+    newData[labelIndex] = rec[chartConfig.geochart.yAxis!.property] as number;
+  });
+
+  // Return the compressed data
+  return newData;
+}
+
+/**
+ * Creates a ChartDataset object, for ChartJS, based on the GeoChart configuration.
  * @param chartConfig GeoChartConfig<TType> The GeoChart configuration
  * @param creationIndex number The index of the ChartDataset being created (used for the loop in 'createDtasets')
  * @param label string The ChartDataset label
@@ -94,10 +134,12 @@ function createDataset<TType extends ChartType, TData extends GeoDefaultDataPoin
       data: [],
     };
 
-    // If useSets is defined, set it for each dataset
+    // If useSteps is defined, set it for each dataset
     if (chartConfig.geochart.useSteps) theDatasetLine.stepped = chartConfig.geochart.useSteps;
+
     // If tension is defined, set it for each dataset
     if (chartConfig.geochart.tension) theDatasetLine.tension = chartConfig.geochart.tension;
+
     // Switch to generic type
     theDatasetGeneric = theDatasetLine as ChartDataset<TType, TData>;
   } else {
@@ -120,7 +162,7 @@ function createDataset<TType extends ChartType, TData extends GeoDefaultDataPoin
 }
 
 /**
- * Create all ChartDataset objects for line chart types, for ChartJS, based on the GeoChart configuration.
+ * Creates all ChartDataset objects for line chart types, for ChartJS, based on the GeoChart configuration.
  * This function supports various on-the-fly formatting such as the chart config 'category' and the datasource 'compressed' format.
  * @param chartConfig  GeoChartConfig<TType> The GeoChart configuration
  * @param datasource GeoChartDatasource The datasource to read to create the datasets with
@@ -131,7 +173,7 @@ function createDatasetsLineBar<
   TType extends ChartType = 'line' | 'bar',
   TData extends GeoDefaultDataPoint<TType> = GeoDefaultDataPoint<TType>,
   TLabel extends string = string
->(chartConfig: GeoChartConfig<TType>, datasource: GeoChartDatasource, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
+>(chartConfig: GeoChartConfig<TType>, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
   // Transform the TypeFeatureJson data to ChartData<TType, TData, string>
   const returnedChartData: ChartData<TType, TData, TLabel> = {
     labels: [],
@@ -143,27 +185,27 @@ function createDatasetsLineBar<
   if (chartConfig.category?.property) {
     // 1 category = 1 dataset
     const categoriesRead: GeoChartCategoriesGroup<TData> = {};
-    records.forEach((item: TypeJsonObject) => {
+    records.forEach((rec: TypeJsonObject) => {
       // Read the category as a string
-      const cat = item[chartConfig.category!.property] as string;
+      const catName = rec[chartConfig.category!.property] as string;
 
       // If new category
-      if (!Object.keys(categoriesRead).includes(cat)) {
+      if (!Object.keys(categoriesRead).includes(catName)) {
         // The colors to use
         const backgroundColor = getColorFromPalette(chartConfig.category!.paletteBackgrounds!, idx);
         const borderColor = getColorFromPalette(chartConfig.category!.paletteBorders!, idx);
 
         // Create dataset
-        const newDataset = createDataset<TType, TData>(chartConfig, backgroundColor, borderColor, cat);
-        categoriesRead[cat] = { index: idx++, data: newDataset.data };
+        const newDataset = createDataset<TType, TData>(chartConfig, backgroundColor, borderColor, catName);
+        categoriesRead[catName] = { index: idx++, data: newDataset.data };
         returnedChartData.datasets.push(newDataset);
       }
 
       // Parse data
-      const dataParsed = createDataXYFormat<TType>(chartConfig, item);
+      const dataParsed = createDataXYFormat<TType>(chartConfig, rec);
 
       // Find the data array and push in it.
-      categoriesRead[cat].data.push(dataParsed);
+      categoriesRead[catName].data.push(dataParsed);
     });
   } else {
     // 1 feature = 1 dataset
@@ -172,12 +214,13 @@ function createDatasetsLineBar<
     const borderColor = getColorFromPalette(chartConfig.geochart.xAxis!.paletteBorders!, 0);
 
     // Create dataset
-    const newDataset = createDataset<TType, TData>(chartConfig, backgroundColor, borderColor, 'ALL');
+    const newDataset = createDataset<TType, TData>(chartConfig, backgroundColor, borderColor, undefined);
     returnedChartData.datasets.push(newDataset);
 
-    records.forEach((item: TypeJsonObject) => {
+    // For each record
+    records.forEach((rec: TypeJsonObject) => {
       // Parse data
-      const dataParsed = createDataXYFormat<TType>(chartConfig, item);
+      const dataParsed = createDataXYFormat<TType>(chartConfig, rec);
       newDataset.data.push(dataParsed);
     });
   }
@@ -187,7 +230,7 @@ function createDatasetsLineBar<
 }
 
 /**
- * Create all ChartDataset objects for line and bar chart types, for ChartJS, based on the GeoChart configuration.
+ * Creates all ChartDataset objects for line and bar chart types, for ChartJS, based on the GeoChart configuration.
  * This function supports various on-the-fly formatting such as the chart config 'category' and the datasource 'compressed' format.
  * @param chartConfig  GeoChartConfig<TType> The GeoChart configuration
  * @param datasource GeoChartDatasource The datasource to read to create the datasets with
@@ -198,7 +241,7 @@ function createDatasetsPieDoughnut<
   TType extends ChartType = 'pie' | 'doughnut',
   TData extends GeoDefaultDataPoint<TType> = GeoDefaultDataPoint<TType>,
   TLabel extends string = string
->(chartConfig: GeoChartConfig<TType>, datasource: GeoChartDatasource, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
+>(chartConfig: GeoChartConfig<TType>, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
   // Transform the TypeFeatureJson data to ChartData<TType, TData, string>
   const returnedChartData: ChartData<TType, TData, TLabel> = {
     labels: [],
@@ -206,9 +249,9 @@ function createDatasetsPieDoughnut<
   };
 
   // For Pie and Doughnut, all values for x axis will go in labels
-  records.forEach((item: TypeJsonObject) => {
+  records.forEach((rec: TypeJsonObject) => {
     // Read the value on x axis for each
-    const valX: TLabel = item[chartConfig.geochart.xAxis!.property] as string as TLabel;
+    const valX: TLabel = rec[chartConfig.geochart.xAxis!.property] as string as TLabel;
     if (!returnedChartData.labels!.includes(valX)) returnedChartData.labels!.push(valX);
   });
 
@@ -222,19 +265,19 @@ function createDatasetsPieDoughnut<
     // 1 category = 1 dataset
     const categoriesRead: GeoChartCategoriesGroup<TData> = {};
     let idx = 0;
-    records.forEach((item: TypeJsonObject) => {
+    records.forEach((rec: TypeJsonObject) => {
       // Read the category as a string
-      const cat = item[chartConfig.category!.property] as string;
+      const catName = rec[chartConfig.category!.property] as string;
 
       // If new category
-      if (!Object.keys(categoriesRead).includes(cat)) {
+      if (!Object.keys(categoriesRead).includes(catName)) {
         // The colors to use
         let borderColor;
         if (chartConfig.category!.paletteBorders) borderColor = getColorFromPalette(chartConfig.category!.paletteBorders!, idx);
 
         // Create dataset
-        const newDataset = createDataset<TType, TData>(chartConfig, colorPaletteForAll, borderColor, cat);
-        categoriesRead[cat] = { index: idx++, data: newDataset.data };
+        const newDataset = createDataset<TType, TData>(chartConfig, colorPaletteForAll, borderColor, catName);
+        categoriesRead[catName] = { index: idx++, data: newDataset.data };
         returnedChartData.datasets.push(newDataset);
       }
     });
@@ -243,24 +286,23 @@ function createDatasetsPieDoughnut<
 
     // For each dataset
     returnedChartData.datasets.forEach((chartDataset: ChartDataset<TType, TData>) => {
-      // Create a new data array of expected length
-      const newData: TData = Array.from({ length: returnedChartData.labels!.length }, () => null) as TData;
-
-      // For each data for that particular label
-      records
-        .filter((item: TypeJsonObject) => {
-          return (item[chartConfig.category!.property] as string as TLabel) === chartDataset.label;
-        })
-        .forEach((item: TypeJsonObject) => {
-          const valX: TLabel = item[chartConfig.geochart.xAxis!.property] as string as TLabel;
-          // Find the index for that value
-          const labelIndex = returnedChartData.labels!.indexOf(valX);
-          newData[labelIndex] = item[chartConfig.geochart.yAxis!.property] as number;
-        });
+      // Compress the data for the ChartDataset
+      const newData: TData = createDataCompressedForPieDoughnut(chartConfig, chartDataset, returnedChartData.labels!, records);
 
       // Find the data array and push in it.
       categoriesRead[chartDataset.label!].data.push(...newData);
     });
+  } else {
+    // 1 feature = 1 dataset
+    // Create dataset
+    const newDataset = createDataset<TType, TData>(chartConfig, colorPaletteForAll, undefined, undefined);
+    returnedChartData.datasets.push(newDataset);
+
+    // Compress the data for the ChartDataset
+    const newData: TData = createDataCompressedForPieDoughnut(chartConfig, newDataset, returnedChartData.labels!, records);
+
+    // Push the data
+    newDataset.data.push(...newData);
   }
 
   // Done
@@ -268,7 +310,7 @@ function createDatasetsPieDoughnut<
 }
 
 /**
- * Create all ChartDataset objects, for ChartJS, based on the GeoChart configuration.
+ * Creates all ChartDataset objects, for ChartJS, based on the GeoChart configuration.
  * This function supports various on-the-fly formatting such as the chart config 'category' and the datasource 'compressed' format.
  * @param chartConfig  GeoChartConfig<TType> The GeoChart configuration
  * @param datasource GeoChartDatasource The datasource to read to create the datasets with
@@ -279,13 +321,13 @@ function createDatasets<
   TType extends ChartType = ChartType,
   TData extends GeoDefaultDataPoint<TType> = GeoDefaultDataPoint<TType>,
   TLabel extends string = string
->(chartConfig: GeoChartConfig<TType>, datasource: GeoChartDatasource, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
+>(chartConfig: GeoChartConfig<TType>, records: TypeJsonObject[]): ChartData<TType, TData, TLabel> {
   // Depending on the ChartType
   if (chartConfig.chart === 'line' || chartConfig.chart === 'bar') {
-    return createDatasetsLineBar(chartConfig, datasource, records);
+    return createDatasetsLineBar(chartConfig, records);
   }
   if (chartConfig.chart === 'pie' || chartConfig.chart === 'doughnut') {
-    return createDatasetsPieDoughnut(chartConfig, datasource, records);
+    return createDatasetsPieDoughnut(chartConfig, records);
   }
   throw Error('Unsupported chart type');
 }
@@ -349,13 +391,15 @@ function createChartJSOptionsColorPalette<TType extends ChartType>(chartConfig:
 
 /**
  * Creates the ChartJS Options object necessary for ChartJS process.
- * @param chartConfig The GeoChart Inputs to use to build the ChartJS ingestable information.
- * @param defaultOptions The default, basic, necessary Options for ChartJS.
+ * @param chartConfig GeoChartConfig<TType>The GeoChart Inputs to use to build the ChartJS ingestable information.
+ * @param defaultOptions ChartOptions<TType>The default, basic, necessary Options for ChartJS.
+ * @param language string The current language of the UI.
  * @returns The ChartJS ingestable Options properties
  */
 export function createChartJSOptions<TType extends ChartType>(
   chartConfig: GeoChartConfig<TType>,
-  defaultOptions: ChartOptions<TType>
+  defaultOptions: ChartOptions<TType>,
+  language: string
 ): ChartOptions<TType> {
   // The Chart JS Options as entered or the default options
   const options = (chartConfig.chartjsOptions || { ...defaultOptions }) as ChartOptions<TType>;
@@ -364,28 +408,52 @@ export function createChartJSOptions<TType extends ChartType>(
   createChartJSOptionsColorPalette(chartConfig);
 
   // If line and using a time series
-  if (chartConfig.chart === 'line' && chartConfig.geochart.xAxis?.type === 'time') {
-    (options as ChartOptions<'line'>).scales = {
+  if (chartConfig.chart === 'line' && (chartConfig.geochart.xAxis?.type === 'time' || chartConfig.geochart.xAxis?.type === 'timeseries')) {
+    const optionsLine = options as ChartOptions<'line'>;
+    optionsLine.scales = {
+      ...optionsLine.scales,
       x: {
-        type: 'time',
+        type: chartConfig.geochart.xAxis?.type,
         ticks: {
           major: {
             enabled: true,
           },
           source: 'auto',
-          // TODO: Check the logic to use for the ticks. Leaving code commented here to come back to it later.
-          // callback: (tickValue: number | Date | string, index: number, ticks: unknown[]): string => {
-          //   // Hide every 2nd tick label
-
-          //   // Make it a date
-          //   const d = new Date(tickValue).getMonth();
-          //   return d.toString();
-          // },
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          callback: (tickValue: number | Date | string, index: number, ticks: Tick[]): string => {
+            // Make it a date
+            const d = new Date(tickValue);
+            const label = d.toLocaleString(language, DATE_OPTIONS_AXIS);
+
+            // Trick by keeping the previously calculated label in an extra property (for performance)
+            // eslint-disable-next-line no-param-reassign, @typescript-eslint/no-explicit-any
+            (ticks[index] as any).geoLabel = label;
+
+            // If the generated label is major or different than the one prior
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (ticks[index].major || (index > 0 && label !== (ticks[index - 1] as any).geoLabel)) {
+              return label;
+            }
+
+            // No label, redundant
+            return '';
+          },
         },
       },
     };
   }
 
+  // If line and using a time series
+  if ((chartConfig.chart === 'line' || chartConfig.chart === 'bar') && chartConfig.geochart.yAxis?.type) {
+    const optionsLine = options as ChartOptions<'line' | 'bar'>;
+    optionsLine.scales = {
+      ...optionsLine.scales,
+      y: {
+        type: chartConfig.geochart.yAxis?.type,
+      },
+    };
+  }
+
   // Return the ChartJS Options
   return options;
 }
@@ -393,9 +461,9 @@ export function createChartJSOptions<TType extends ChartType>(
 /**
  * Creates the ChartJS Data object necessary for ChartJS process.
  * When the xAxis reprensents time, the datasets are sorted by date.
- * @param chartConfig The GeoChart Inputs to use to build the ChartJS ingestable information.
- * @param records The Records to build the data from.
- * @param defaultData The default, basic, necessary Data for ChartJS.
+ * @param chartConfig GeoChartConfig<TType>The GeoChart Inputs to use to build the ChartJS ingestable information.
+ * @param records TypeJsonObject[] | undefined The Records to build the data from.
+ * @param defaultData ChartData<TType, TData, TLabel>The default, basic, necessary Data for ChartJS.
  * @returns The ChartJS ingestable Data properties
  */
 export function createChartJSData<
@@ -404,19 +472,18 @@ export function createChartJSData<
   TLabel extends string = string
 >(
   chartConfig: GeoChartConfig<TType>,
-  datasource: GeoChartDatasource,
   records: TypeJsonObject[] | undefined,
   defaultData: ChartData<TType, TData, TLabel>
 ): ChartData<TType, TData, TLabel> {
   // If there's a data source, parse it to a GeoChart data
   let data: ChartData<TType, TData, TLabel> = { ...defaultData };
   if (records && records.length > 0) {
-    data = createDatasets(chartConfig, datasource, records);
+    data = createDatasets(chartConfig, records);
   }
 
   // If the x axis type is time
-  if (chartConfig.geochart.xAxis?.type === 'time') {
-    // Make sure the data is sorted on X
+  if (chartConfig.geochart.xAxis?.type === 'time' || chartConfig.geochart.xAxis?.type === 'timeseries') {
+    // Make sure the datasets data are sorted on X
     sortOnX(data.datasets);
   }
 
diff --git a/src/chart-schema-validator.ts b/src/chart-schema-validator.ts
index ca8122c..e9c9df3 100644
--- a/src/chart-schema-validator.ts
+++ b/src/chart-schema-validator.ts
@@ -81,7 +81,7 @@ export class SchemaValidator {
    * Returns a string representation of the errors of all ValidatorResult objects.
    * @param valRes ValidatorResult[] the list of validation results to read and put to string
    */
-  public static parseValidatorResultsMessages = (valRes: ValidatorResult[]): string => {
+  public static parseValidatorResultsMessages = (valRes: (ValidatorResult | undefined)[]): string => {
     // Gather all error messages for data input
     let msg = '';
     valRes.forEach((v) => {
@@ -95,10 +95,10 @@ export class SchemaValidator {
    * Returns a string representation of the error in the ValidatorResult object.
    * @param valRes ValidatorResult the validation result to read and put to string
    */
-  public static parseValidatorResultMessage = (valRes: ValidatorResult): string => {
+  public static parseValidatorResultMessage = (valRes: ValidatorResult | undefined): string => {
     // Gather all error messages for data input
     let msg = '';
-    valRes.errors?.forEach((m: string) => {
+    valRes?.errors?.forEach((m: string) => {
       msg += `${m}\n`;
     });
     return msg.replace(/^\n+|\n+$/gm, '');
diff --git a/src/chart-style.ts b/src/chart-style.ts
new file mode 100644
index 0000000..c474e99
--- /dev/null
+++ b/src/chart-style.ts
@@ -0,0 +1,58 @@
+/**
+ * SX Classes for the Chart
+ */
+export const sxClasses = {
+  mainContainer: {
+    minHeight: '400px',
+  },
+  mainGeoChartContainer: {
+    padding: '10px',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  datasourceSelector: {
+    minWidth: '150px',
+  },
+  title: {
+    padding: '10px',
+    fontSize: 'larger',
+  },
+  uiOptions: {
+    position: 'absolute',
+    right: '0px',
+    marginRight: '35px',
+    verticalAlign: 'middle',
+  },
+  uiOptionsStepsSelector: {
+    minWidth: '100px',
+  },
+  checkDatasetWrapperLabel: {
+    display: 'inline-block',
+    padding: '9px',
+  },
+  checkDatasetWrapper: {
+    display: 'inline-block',
+  },
+  checkDatasetLabel: {
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    marginRight: '20px !important',
+  },
+  chartContent: {
+    position: 'relative',
+  },
+  xSliderWrapper: {},
+  ySliderWrapper: {
+    height: '85%',
+  },
+  loadingDatasource: {
+    backgroundColor: 'transparent',
+    zIndex: 0,
+  },
+  chartError: {
+    fontStyle: 'italic',
+    color: 'red',
+  },
+};
diff --git a/src/chart-types.ts b/src/chart-types.ts
index fbfb7dc..38065bf 100644
--- a/src/chart-types.ts
+++ b/src/chart-types.ts
@@ -6,7 +6,7 @@ import { extractColor } from './chart-util';
 export type * from 'chart.js';
 
 // Simulate the types in cgpv
-// TODO: Refactor - Think about it, should I fetch cgpv even in ts classes to get the type?
+// TODO: Refactor - Think about it, do we fetch cgpv, even in '.ts' classes!?
 export type TypeJsonValue = null | string | number | boolean | TypeJsonObject[] | { [key: string]: TypeJsonObject };
 export type TypeJsonObject = TypeJsonValue & { [key: string]: TypeJsonObject };
 
@@ -25,15 +25,8 @@ export type GeoChartOptions<TType extends ChartType> = {
   title: string;
   category?: GeoChartCategory;
   datasources: GeoChartDatasource[];
-  geochart: {
-    borderWidth?: number;
-    useSteps?: 'before' | 'after' | 'middle' | boolean;
-    tension?: number;
-    xSlider?: GeoChartOptionsSlider;
-    ySlider?: GeoChartOptionsSlider;
-    xAxis?: GeoChartOptionsAxis;
-    yAxis?: GeoChartOptionsAxis;
-  };
+  geochart: GeoChartOptionsGeochart;
+  ui?: GeoChartOptionsUI;
 };
 
 /**
@@ -48,6 +41,32 @@ export type GeoChartCategory = {
   paletteBorders?: string[];
 };
 
+/**
+ * The steps possibilities explicitely typed.
+ */
+export const StepsPossibilitiesConst = ['before', 'after', 'middle', false] as const;
+export type StepsPossibilities = (typeof StepsPossibilitiesConst)[number];
+
+/**
+ * The Configuration about using GeoChart specific parameters.
+ */
+export type GeoChartOptionsGeochart = {
+  borderWidth?: number;
+  useSteps?: StepsPossibilities;
+  tension?: number;
+  xAxis?: GeoChartOptionsAxis;
+  yAxis?: GeoChartOptionsAxis;
+  xSlider?: GeoChartOptionsSlider;
+  ySlider?: GeoChartOptionsSlider;
+};
+
+/**
+ * The Configuration about using UI specific parameters.
+ */
+export type GeoChartOptionsUI = {
+  stepsSwitcher?: boolean;
+};
+
 /**
  * The Datasource object to hold the data, as supported by GeoChart.
  */
@@ -82,6 +101,17 @@ export type GeoChartDefaultColors = {
   color: string;
 };
 
+/**
+ * Options for the Slider Axis component
+ */
+export type GeoChartOptionsAxis = {
+  type: 'linear' | 'logarithmic' | 'category' | 'time' | 'timeseries' | undefined;
+  property: string;
+  usePalette?: boolean;
+  paletteBackgrounds: string[];
+  paletteBorders: string[];
+};
+
 /**
  * Options for the Slider component
  */
@@ -89,21 +119,11 @@ export type GeoChartOptionsSlider = {
   display?: boolean;
   min?: number;
   max?: number;
+  step?: number;
   value?: number | number[];
   track?: 'normal' | 'inverted' | false;
 };
 
-/**
- * Options for the Slider Axis component
- */
-export type GeoChartOptionsAxis = {
-  type: 'linear' | 'logarithmic' | 'category' | 'time' | 'timeseries' | 'radialLinear' | undefined;
-  property: string;
-  usePalette?: boolean;
-  paletteBackgrounds: string[];
-  paletteBorders: string[];
-};
-
 /**
  * An X, Y pair to be used in the Chart Data. Not redirecting to the DefaultDataPoint type, because the latter
  * points to a ScatterDataPoint which is only supporting x: number and y: number, which isn't try for us with the Date support on the x property.
@@ -193,3 +213,21 @@ export const DEFAULT_COLOR_PALETTE_CUSTOM_ALT_OPAQUE: string[] = DEFAULT_COLOR_P
   // Extract the alpha-less color code for better output
   return extractColor(color)!;
 });
+
+/**
+ * The date formatting to show the dates on the Axis.
+ */
+export const DATE_OPTIONS_AXIS: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+};
+
+/**
+ * The date formatting to show the dates on Slider.
+ */
+export const DATE_OPTIONS_LONG: Intl.DateTimeFormatOptions = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
diff --git a/src/chart.tsx b/src/chart.tsx
index f669fde..844b7c5 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-// TODO: Remove the no-console eslint above when component development stabilizes
 import { Chart as ChartJS, ChartType, ChartOptions, ChartData, ChartDataset, registerables } from 'chart.js';
 import { Chart as ChartReact } from 'react-chartjs-2';
 import 'chartjs-adapter-moment';
@@ -8,15 +6,19 @@ import {
   GeoChartAction,
   GeoChartDefaultColors,
   GeoDefaultDataPoint,
+  GeoChartOptionsGeochart,
   GeoChartDatasource,
   TypeJsonObject,
+  StepsPossibilitiesConst,
+  DATE_OPTIONS_LONG,
 } from './chart-types';
 import { SchemaValidator, ValidatorResult } from './chart-schema-validator';
 import { createChartJSOptions, createChartJSData } from './chart-parsing';
 import { isNumber, extractColor } from './chart-util';
-
-// TEMPORARY VARIABLE FOR EASE OF DEBUGGING
-const LOGGING: number = 1;
+import { sxClasses } from './chart-style';
+import { log, LOG_LEVEL_MAXIMUM, LOG_LEVEL_MEDIUM, LOG_LEVEL_LOW } from './logger';
+import T_EN from '../locales/en/translation.json';
+import T_FR from '../locales/fr/translation.json';
 
 /**
  * Main props for the Chart
@@ -26,7 +28,7 @@ export interface TypeChartChartProps<
   TData extends GeoDefaultDataPoint<TType> = GeoDefaultDataPoint<TType>,
   TLabel = string
 > {
-  style?: unknown; // Will be casted as CSSProperties later via the imported cgpv react
+  sx?: unknown; // Will be casted as CSSProperties later via the imported cgpv react
   inputs?: GeoChartConfig<TType>; // The official way to work with all GeoChart features
   datasource?: GeoChartDatasource; // The selected datasource
   schemaValidator: SchemaValidator; // The schemas validator object
@@ -43,31 +45,10 @@ export interface TypeChartChartProps<
   onDatasetChanged?: (datasetIndex: number, datasetLabel: string | undefined, checked: boolean) => void;
   onSliderXChanged?: (value: number | number[]) => void;
   onSliderYChanged?: (value: number | number[]) => void;
-  onError?: (
-    inputErrors: ValidatorResult | undefined,
-    optionsErrors: ValidatorResult | undefined,
-    dataErrors: ValidatorResult | undefined
-  ) => void;
+  onStepSwitcherChanged?: (value: string) => void;
+  onError?: (validators: (ValidatorResult | undefined)[]) => void;
 }
 
-/**
- * SX Classes for the Chart
- */
-const sxClasses = {
-  chartError: {
-    fontStyle: 'italic',
-    color: 'red',
-  },
-  checkDatasetWrapper: {
-    display: 'inline-block',
-  },
-  checkDataset: {
-    display: 'inline-flex',
-    verticalAlign: 'middle',
-    marginRight: '20px !important',
-  },
-};
-
 /**
  * Create a customized Chart UI
  *
@@ -87,10 +68,11 @@ export function GeoChart<
   const w = window as any;
   // Fetch the cgpv module
   const { cgpv } = w;
+  const { useTranslation } = cgpv;
   const { useEffect, useState, useRef, useCallback, CSSProperties } = cgpv.react;
   const { Box, Grid, Checkbox, Select, MenuItem, TypeMenuItemProps, Typography, SliderBase: Slider, CircularProgress } = cgpv.ui.elements;
   const {
-    style: elStyle,
+    sx: elStyle,
     schemaValidator,
     inputs: parentInputs,
     datasource: parentDatasource,
@@ -107,21 +89,26 @@ export function GeoChart<
     onDatasetChanged,
     onSliderXChanged,
     onSliderYChanged,
+    onStepSwitcherChanged,
     onError,
   } = props;
 
+  // Translation
+  const { t, i18n } = useTranslation();
+
   // Cast the style
-  const style = elStyle as typeof CSSProperties;
+  const sx = elStyle as typeof CSSProperties;
 
   // Attribute the ChartJS default colors
   if (defaultColors?.backgroundColor) ChartJS.defaults.backgroundColor = defaultColors?.backgroundColor;
   if (defaultColors?.borderColor) ChartJS.defaults.borderColor = defaultColors?.borderColor;
   if (defaultColors?.color) ChartJS.defaults.color = defaultColors?.color;
 
-  /** ***************************************** USE STATE SECTION START ************************************************ */
+  /** ****************************************** USE STATE SECTION START ************************************************ */
 
-  // TODO: Refactor - Check why the useState coming from cgpv loses its generic property.
-  // TO.DO.CONT: Here's some crazy typing so that at least things remain typed instead of 'any'.
+  // TODO: Refactor - Check why the useState and useCallback coming from cgpv lose their generic capabilities.
+  // TO.DO.CONT: This is rather problematic. It forces the devs to explicitely use some "not so pretty" type assertions
+  // so that things remain typed instead of becoming 'any' when using functions such as 'useState', 'useCallback', 'useRef', etc.
 
   const [inputs, setInputs] = useState(parentInputs) as [
     GeoChartConfig<TType> | undefined,
@@ -141,37 +128,97 @@ export function GeoChart<
   const [filteredRecords, setFilteredRecords] = useState() as [TypeJsonObject[] | undefined, React.Dispatch<TypeJsonObject[] | undefined>];
   const [xSliderMin, setXSliderMin] = useState(0) as [number, React.Dispatch<number>];
   const [xSliderMax, setXSliderMax] = useState(0) as [number, React.Dispatch<number>];
+  const [xSliderSteps, setXSliderSteps] = useState(1) as [number, React.Dispatch<number>];
   const [xSliderValues, setXSliderValues] = useState(0) as [number | number[], React.Dispatch<number | number[]>];
   const [ySliderMin, setYSliderMin] = useState(0) as [number, React.Dispatch<number>];
   const [ySliderMax, setYSliderMax] = useState(0) as [number, React.Dispatch<number>];
+  const [ySliderSteps, setYSliderSteps] = useState(1) as [number, React.Dispatch<number>];
   const [ySliderValues, setYSliderValues] = useState(0) as [number | number[], React.Dispatch<number | number[]>];
   const [validatorInputs, setValidatorInputs] = useState() as [ValidatorResult | undefined, React.Dispatch<ValidatorResult | undefined>];
   const [validatorOptions, setValidatorOptions] = useState() as [ValidatorResult | undefined, React.Dispatch<ValidatorResult | undefined>];
   const [validatorData, setValidatorData] = useState() as [ValidatorResult | undefined, React.Dispatch<ValidatorResult | undefined>];
+  const [selectedStepSwitcher, setStepSwitcher] = useState() as [string | false, React.Dispatch<string | false>];
   const chartRef = useRef() as React.MutableRefObject<ChartJS<TType, TData>>;
 
-  /** ***************************************** USE STATE SECTION END ************************************************ */
-  /** ***************************************** CORE FUNCTIONS START ************************************************* */
+  /** ****************************************** USE STATE SECTION END ************************************************** */
+  /** ******************************************* CORE FUNCTIONS START ************************************************** */
+
+  /**
+   * Helper function to set the x and y axes based on the inputs and values.
+   * @param geochart GeoChartOptionsGeochart The Geochart options
+   * @param datasourceItems TypeJsonObject[] The Datasource items
+   */
+  const processAxes = (geochart: GeoChartOptionsGeochart, datasourceItems: TypeJsonObject[]): void => {
+    // If has a xSlider and property and numbers as property
+    if (geochart.xSlider?.display && geochart.xAxis?.property) {
+      // If using numbers as data value
+      if (datasourceItems && datasourceItems.length > 0 && isNumber(datasourceItems![0][geochart.xAxis?.property])) {
+        // If either min or max isn't preset
+        let minVal = geochart.xSlider!.min;
+        let maxVal = geochart.xSlider!.max;
+        if (minVal === undefined || maxVal === undefined) {
+          // Dynamically calculate them
+          const values = datasourceItems!.map((x: TypeJsonObject) => {
+            return x[geochart.xAxis!.property] as number;
+          });
+          minVal = minVal !== undefined ? minVal : Math.floor(Math.min(...values));
+          maxVal = maxVal !== undefined ? maxVal : Math.ceil(Math.max(...values));
+        }
+        setXSliderMin(minVal);
+        setXSliderMax(maxVal);
+
+        // If steps are determined by config
+        if (geochart.xSlider!.step) setXSliderSteps(geochart.xSlider!.step);
+        setXSliderValues([minVal, maxVal]);
+      }
+    }
+
+    // If has a ySlider and property
+    if (geochart.ySlider?.display && geochart.yAxis?.property) {
+      // If using numbers as data value
+      if (datasourceItems && datasourceItems.length > 0 && isNumber(datasourceItems![0][geochart.yAxis?.property])) {
+        // If either min or max isn't preset
+        let minVal = geochart.ySlider!.min;
+        let maxVal = geochart.ySlider!.max;
+        if (minVal === undefined || maxVal === undefined) {
+          // Dynamically calculate them
+          const values = datasourceItems!.map((x: TypeJsonObject) => {
+            return x[geochart.yAxis!.property] as number;
+          });
+          minVal = minVal !== undefined ? minVal : Math.floor(Math.min(...values));
+          maxVal = maxVal !== undefined ? maxVal : Math.ceil(Math.max(...values));
+        }
+        setYSliderMin(minVal);
+        setYSliderMax(maxVal);
+
+        // If steps are determined by config
+        if (geochart.ySlider!.step) setYSliderSteps(geochart.ySlider!.step);
+        setYSliderValues([minVal, maxVal]);
+      }
+    }
+  };
 
   /**
-   * Filters the datasource based on 2 possible and independent axis.
-   * Ideally, we'd filter the data on the 2 independent axis individually and then grab the intersecting results,
-   * but, for performance reasons, the code cumulates the filtered data instead.
+   * Helper function to filter datasource items based on 2 possible and independent axis.
+   * For performance reasons, the code cumulates the filtered data instead of treating the axes individually.
+   * @param datasourceItems TypeJsonObject[] The Datasource items
+   * @param xValues number | number[] The values in X to filter on
+   * @param yValues number | number[] The values in Y to filter on
    */
-  const calculateFiltering = (datasource: GeoChartDatasource, xValues: number | number[], yValues: number | number[]): void => {
+  const processFiltering = (datasourceItems: TypeJsonObject[], xValues: number | number[], yValues: number | number[]): void => {
     // If chart type is line
-    let resItemsFinal: TypeJsonObject[] = [...datasource.items!];
+    let resItemsFinal: TypeJsonObject[] = [...datasourceItems!];
     if (inputs?.chart === 'line') {
       // If filterings on x supported
       if (Array.isArray(xValues) && xValues.length === 2) {
         // If filtering on time values
-        if (inputs?.geochart?.xAxis?.type === 'time') {
+        if (inputs?.geochart?.xAxis?.type === 'time' || inputs?.geochart?.xAxis?.type === 'timeseries') {
           // Grab the filters
           const theDateFrom = new Date(xValues[0]);
           const theDateTo = new Date(xValues[1]);
 
-          // Filter the datasource.items
-          resItemsFinal = datasource.items!.filter((item: TypeJsonObject) => {
+          // Filter the datasourceItems
+          resItemsFinal = datasourceItems!.filter((item: TypeJsonObject) => {
             const d = new Date(item[inputs.geochart.xAxis!.property] as string);
             return theDateFrom <= d && d <= theDateTo;
           });
@@ -180,8 +227,8 @@ export function GeoChart<
           const from = xValues[0];
           const to = xValues[1];
 
-          // Filter the datasource.items
-          resItemsFinal = datasource.items!.filter((item: TypeJsonObject) => {
+          // Filter the datasourceItems
+          resItemsFinal = datasourceItems!.filter((item: TypeJsonObject) => {
             return from <= (item[inputs.geochart.xAxis!.property] as number) && (item[inputs.geochart.xAxis!.property] as number) <= to;
           });
         }
@@ -204,7 +251,19 @@ export function GeoChart<
   };
 
   /**
-   * Performs a redraw.
+   * Helper function checking for the valid states of a list of ValidatorResults. Returns true if there were no errors found.
+   * @param validators (ValidatorResult | undefined)[] The list of validator results to check for their valid states
+   * @returns true if there were no errors in the schema validations
+   */
+  const hasValidSchemas = (validators: (ValidatorResult | undefined)[]): boolean => {
+    const validatorsInvalid = validators.filter((valResult: ValidatorResult | undefined) => {
+      return valResult && !valResult.valid;
+    });
+    return validatorsInvalid.length === 0;
+  };
+
+  /**
+   * Performs a redraw by changing the 'redraw' property and changing it back after.
    */
   const performRedraw = (): void => {
     setRedraw(true);
@@ -218,9 +277,10 @@ export function GeoChart<
 
   /**
    * Handles when the Datasource changes
+   * @param e Event The Select change event
    * @param item MenuItem The selected MenuItem
    */
-  const handleDatasourceChanged = (e: unknown, item: typeof MenuItem): void => {
+  const handleDatasourceChanged = (e: Event, item: typeof MenuItem): void => {
     // Find the selected datasource reference based on the MenuItem
     const ds: GeoChartDatasource | undefined = inputs!.datasources.find((x) => {
       return (x.value || x.display) === item.props.value;
@@ -234,32 +294,33 @@ export function GeoChart<
   };
 
   /**
-   * Handles when a data was checked/unchecked (via the legend). This is only used by Pie and Doughnut Charts.
+   * Handles when a dataset was checked/unchecked (via the legend)
    * @param datasetIndex number Indicates the dataset index that was checked/unchecked
-   * @param dataLabel string Indicates the data label that was checked/unchecked
+   * @param datasetLabel string Indicates the dataset label that was checked/unchecked
    * @param checked boolean Indicates the checked state
    */
-  const handleDataChecked = (dataIndex: number, dataLabel: string, checked: boolean): void => {
+  const handleDatasetChecked = (datasetIndex: number, datasetLabel: string | undefined, checked: boolean): void => {
     // Toggle visibility of the dataset
-    chartRef.current.toggleDataVisibility(dataIndex);
+    chartRef.current.setDatasetVisibility(datasetIndex, checked);
     chartRef.current.update();
 
     // Callback
-    onDataChanged?.(dataIndex, dataLabel, checked);
+    onDatasetChanged?.(datasetIndex, datasetLabel, checked);
   };
 
   /**
-   * Handles when a dataset was checked/unchecked (via the legend)
-   * @param datasetIndex number Indicates the dataset index that was checked/unchecked
+   * Handles when a data was checked/unchecked (via the legend). This is only used by Pie and Doughnut Charts.
+   * @param dataIndex number Indicates the data index that was checked/unchecked
+   * @param dataLabel string Indicates the data label that was checked/unchecked
    * @param checked boolean Indicates the checked state
    */
-  const handleDatasetChecked = (datasetIndex: number, datasetLabel: string | undefined, checked: boolean): void => {
+  const handleDataChecked = (dataIndex: number, dataLabel: string, checked: boolean): void => {
     // Toggle visibility of the dataset
-    chartRef.current.setDatasetVisibility(datasetIndex, checked);
+    chartRef.current.toggleDataVisibility(dataIndex);
     chartRef.current.update();
 
     // Callback
-    onDatasetChanged?.(datasetIndex, datasetLabel, checked);
+    onDataChanged?.(dataIndex, dataLabel, checked);
   };
 
   /**
@@ -268,7 +329,7 @@ export function GeoChart<
    */
   const handleSliderXChange = (newValue: number | number[]): void => {
     // Calculate filterings
-    calculateFiltering(selectedDatasource!, newValue, ySliderValues);
+    processFiltering(selectedDatasource!.items!, newValue, ySliderValues);
 
     // Set the X State
     setXSliderValues(newValue);
@@ -283,7 +344,7 @@ export function GeoChart<
    */
   const handleSliderYChange = (newValue: number | number[]): void => {
     // Calculate filterings
-    calculateFiltering(selectedDatasource!, xSliderValues, newValue);
+    processFiltering(selectedDatasource!.items!, xSliderValues, newValue);
 
     // Set the Y State
     setYSliderValues(newValue);
@@ -298,8 +359,8 @@ export function GeoChart<
    */
   const handleSliderXValueDisplay = (value: number): string => {
     // If current chart has time as xAxis
-    if (inputs?.geochart?.xAxis?.type === 'time') {
-      return new Date(value).toDateString();
+    if (inputs?.geochart?.xAxis?.type === 'time' || inputs?.geochart?.xAxis?.type === 'timeseries') {
+      return new Date(value).toLocaleDateString(i18n.language, DATE_OPTIONS_LONG);
     }
 
     // Default
@@ -315,20 +376,34 @@ export function GeoChart<
     return value.toString();
   };
 
-  /** **************************************** EVENT HANDLERS SECTION END *********************************************** */
-  /** ***************************************** HOOKS SECTION START ************************************************ */
-
   /**
-   * Returns true if there were no errors in the schema validations
-   * @returns true if there were no errors in the schema validations of 'inputs', 'options' or 'chart'
+   * Handles when the Steps Switcher changes
+   * @param value string Indicates the steps value
    */
-  const hasValidSchemas = useCallback((): boolean => {
-    return (
-      (!validatorInputs || validatorInputs.valid) &&
-      (!validatorOptions || validatorOptions.valid) &&
-      (!validatorData || validatorData.valid)
-    );
-  }, [validatorData, validatorInputs, validatorOptions]);
+  const handleStepsSwitcherChanged = (e: unknown, item: typeof MenuItem): void => {
+    // Set the step switcher
+    setStepSwitcher(item.props.value);
+
+    // Adjust the configuration, live, for the next render
+    if (inputs) inputs.geochart.useSteps = item.props.value;
+
+    // Adjust the configuration, for the current render too
+    if (chartType === 'line' && chartData) {
+      chartData.datasets.forEach((ds: ChartDataset<TType, TData>) => {
+        // eslint-disable-next-line no-param-reassign
+        (ds as ChartDataset<'line', TData>).stepped = item.props.value;
+      });
+
+      // Update
+      setChartData({ ...chartData });
+    }
+
+    // Callback
+    onStepSwitcherChanged?.(item.props.value);
+  };
+
+  /** **************************************** EVENT HANDLERS SECTION END *********************************************** */
+  /** ******************************************* HOOKS SECTION START *************************************************** */
 
   /**
    * Essential function to load the records in the Chart.
@@ -336,31 +411,33 @@ export function GeoChart<
    * @param records TypeJsonObject[] The actual records to load in the Chart.
    */
   const processLoadingRecords = useCallback(
-    (datasource: GeoChartDatasource, records: TypeJsonObject[] | undefined): void => {
+    (theInputs: GeoChartConfig<TType>, theLanguage: string, records: TypeJsonObject[] | undefined): void => {
       // Parse the data
-      const parsedOptions = createChartJSOptions<TType>(inputs!, parentOptions!);
-      const parsedData = createChartJSData<TType, TData, TLabel>(inputs!, datasource, records, parentData!);
+      const parsedOptions = createChartJSOptions<TType>(theInputs, parentOptions!, theLanguage);
+      const parsedData = createChartJSData<TType, TData, TLabel>(theInputs, records, parentData!);
 
       // Callback
-      onParsed?.(inputs!.chart, parsedOptions, parsedData);
-
-      if (LOGGING >= 3) console.log('PARSED', inputs, parsedOptions, parsedData);
+      onParsed?.(theInputs!.chart, parsedOptions, parsedData);
 
       // Override
-      setChartType(inputs!.chart);
+      setChartType(theInputs!.chart);
       setChartOptions(parsedOptions);
       setChartData(parsedData);
     },
-    [inputs, onParsed, parentData, parentOptions]
-  );
+    [parentData, parentOptions, onParsed]
+  ) as (theInputs: GeoChartConfig<TType>, theLanguage: string, records: TypeJsonObject[] | undefined) => void;
 
   // Effect hook when the inputs change - coming from the parent component.
   useEffect(() => {
-    if (LOGGING >= 2) console.log('USE EFFECT PARENT INPUTS', parentInputs);
+    // Log
+    log(LOG_LEVEL_LOW, 'USE EFFECT PARENT INPUTS', parentInputs);
 
     // Refresh the inputs in this component
     setInputs(parentInputs);
 
+    // Clear the selected datasource, because we're cleaning house
+    setSelectedDatasource(undefined);
+
     // If parentInputs is specified
     if (parentInputs) {
       // Validate the schema of the received inputs
@@ -368,148 +445,158 @@ export function GeoChart<
     }
 
     return () => {
-      if (LOGGING >= 5) console.log('USE EFFECT PARENT INPUTS - UNMOUNT', parentInputs);
-      setSelectedDatasource(undefined);
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT PARENT INPUTS - UNMOUNT', parentInputs);
     };
   }, [parentInputs, schemaValidator]);
 
   // Effect hook when the inputs change - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 3) console.log('USE EFFECT INPUTS', inputs);
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT INPUTS', inputs);
 
     // Set the first datasource by default
     setSelectedDatasource(inputs?.datasources[0]);
 
+    // If using the steps switcher options
+    if (inputs?.ui?.stepsSwitcher) {
+      // False by default
+      let stepsSwitcher: string | false = false;
+      if (inputs!.geochart.useSteps) stepsSwitcher = inputs!.geochart.useSteps;
+      setStepSwitcher(stepsSwitcher);
+    }
+
     return () => {
-      if (LOGGING >= 5) console.log('USE EFFECT INPUTS - UNMOUNT', inputs);
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT INPUTS - UNMOUNT', inputs);
     };
   }, [inputs]);
 
   // Effect hook when the selected datasource changes - coming from parent component.
   useEffect(() => {
-    if (LOGGING >= 2) console.log('USE EFFECT PARENT DATASOURCE', parentDatasource);
+    // Log
+    log(LOG_LEVEL_LOW, 'USE EFFECT PARENT DATASOURCE', parentDatasource);
 
-    // Set the first datasource by default
+    // Set the datasource as provided
     setSelectedDatasource(parentDatasource);
 
     return () => {
-      if (LOGGING >= 5) console.log('USE EFFECT PARENT DATASOURCE - UNMOUNT', parentDatasource);
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT PARENT DATASOURCE - UNMOUNT', parentDatasource);
     };
   }, [parentDatasource]);
 
   // Effect hook when the selected datasource changes - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 3) console.log('USE EFFECT SELECTED DATASOURCE', selectedDatasource);
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT SELECTED DATASOURCE', inputs, selectedDatasource);
 
     // Clear any record filters
     setFilteredRecords(undefined);
 
     // If selectedDatasource is specified
     if (selectedDatasource) {
-      // If has a xSlider and property and numbers as property
-      if (inputs!.geochart.xSlider?.display && inputs!.geochart.xAxis?.property) {
-        // If using numbers as data value
-        if (
-          selectedDatasource.items &&
-          selectedDatasource.items.length > 0 &&
-          isNumber(selectedDatasource.items![0][inputs!.geochart.xAxis?.property])
-        ) {
-          const values = selectedDatasource.items!.map((x: TypeJsonObject) => {
-            return x[inputs!.geochart.xAxis!.property] as number;
-          });
-          const minVal = Math.floor(Math.min(...values));
-          const maxVal = Math.ceil(Math.max(...values));
-          setXSliderMin(minVal);
-          setXSliderMax(maxVal);
-          setXSliderValues([minVal, maxVal]);
-        }
-      }
-
-      // If has a ySlider and property
-      if (inputs!.geochart.ySlider?.display && inputs!.geochart.yAxis?.property) {
-        // If using numbers as data value
-        if (
-          selectedDatasource.items &&
-          selectedDatasource.items.length > 0 &&
-          isNumber(selectedDatasource.items![0][inputs!.geochart.yAxis?.property])
-        ) {
-          const values = selectedDatasource.items!.map((x: TypeJsonObject) => {
-            return x[inputs!.geochart.yAxis!.property] as number;
-          });
-          const minVal = Math.floor(Math.min(...values));
-          const maxVal = Math.ceil(Math.max(...values));
-          setYSliderMin(minVal);
-          setYSliderMax(maxVal);
-          setYSliderValues([minVal, maxVal]);
-        }
-      }
-
-      // Process loading records
-      processLoadingRecords(selectedDatasource, selectedDatasource.items);
+      processAxes(inputs!.geochart, selectedDatasource!.items!);
+      processLoadingRecords(inputs!, i18n.language, selectedDatasource!.items);
     }
 
     return () => {
-      if (LOGGING >= 5) console.log('USE EFFECT SELECTED DATASOURCE - UNMOUNT', selectedDatasource);
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT SELECTED DATASOURCE - UNMOUNT', selectedDatasource);
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [processLoadingRecords, selectedDatasource]); // No need for 'inputs' to be a dependency here, because when 'inputs' change, it will reset the selected datasource anyways
+  }, [inputs, i18n.language, selectedDatasource, processLoadingRecords]);
 
   // Effect hook when the filtered records change - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 3) console.log('USE EFFECT SELECTED DATASOURCE FILTERED RECORDS', selectedDatasource);
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT SELECTED DATASOURCE FILTERED RECORDS', selectedDatasource, filteredRecords);
 
-    // If filteredRecords is specified
-    if (filteredRecords) {
-      // Process loading records
-      processLoadingRecords(selectedDatasource!, filteredRecords);
-    }
+    // Process loading records
+    if (selectedDatasource) processLoadingRecords(inputs!, i18n.language, filteredRecords || selectedDatasource!.items);
 
     return () => {
-      if (LOGGING >= 5) console.log('USE EFFECT SELECTED DATASOURCE FILTERED RECORDS - UNMOUNT', selectedDatasource);
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT SELECTED DATASOURCE FILTERED RECORDS - UNMOUNT', selectedDatasource);
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [processLoadingRecords, filteredRecords]); // No need for 'selectedDatasource' to be a dependency here, because when 'selectedDatasource' changes, it will reset the filters anyways
+  }, [inputs, i18n.language, selectedDatasource, processLoadingRecords, filteredRecords]);
 
   // Effect hook when the main props about charttype, options and data change - coming from parent component.
   useEffect(() => {
-    if (LOGGING >= 2) console.log('USE EFFECT PARENT CHARTJS INPUTS');
+    // Log
+    log(LOG_LEVEL_LOW, 'USE EFFECT PARENT CHARTJS INPUTS');
 
     // Override
     setChartType(parentChart!);
     setChartOptions(parentOptions!);
     setChartData(parentData!);
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT PARENT CHARTJS INPUTS - UNMOUNT');
+    };
   }, [parentChart, parentOptions, parentData]);
 
   // Effect hook when the chartOptions, chartData change - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 3) console.log('USE EFFECT CHARTJS OPTIONS+DATA', chartOptions, chartData);
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT CHARTJS OPTIONS+DATA', chartOptions, chartData);
 
-    // Validate the parsing we did do follow ChartJS schema validating
-    setValidatorOptions(schemaValidator.validateOptions(chartOptions));
-    setValidatorData(schemaValidator.validateData(chartData));
+    // Validate the parsing we did do follow ChartJS options schema validating
+    if (chartOptions) setValidatorOptions(schemaValidator.validateOptions(chartOptions));
+    // Validate the parsing we did do follow ChartJS data schema validating
+    if (chartData) setValidatorData(schemaValidator.validateData(chartData));
 
     // Always perform a redraw (fixes some unfortunate ChartJS UI issues)
     performRedraw();
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT CHARTJS OPTIONS+DATA - UNMOUNT');
+    };
   }, [chartOptions, chartData, schemaValidator]);
 
   // Effect hook to validate the schemas of inputs - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 4) console.log('USE EFFECT VALIDATORS');
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT VALIDATORS INPUTS', hasValidSchemas([validatorInputs]));
 
     // If any error
-    if (!hasValidSchemas()) {
+    if (!hasValidSchemas([validatorInputs])) {
       // If a callback is defined
-      onError?.(validatorInputs, validatorOptions, validatorData);
+      onError?.([validatorInputs]);
       // eslint-disable-next-line no-console
-      console.error(validatorInputs, validatorOptions, validatorData);
+      console.error([validatorInputs]);
     }
-  }, [validatorInputs, validatorOptions, validatorData, hasValidSchemas, onError]);
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT VALIDATORS INPUTS - UNMOUNT');
+    };
+  }, [validatorInputs, onError]);
+
+  // Effect hook to validate the schemas of inputs - coming from this component.
+  useEffect(() => {
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT VALIDATORS OPTIONS+DATA', hasValidSchemas([validatorOptions, validatorData]));
+
+    // If any error
+    if (!hasValidSchemas([validatorOptions, validatorData])) {
+      // If a callback is defined
+      onError?.([validatorOptions, validatorData]);
+      // eslint-disable-next-line no-console
+      console.error([validatorOptions, validatorData]);
+    }
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT VALIDATORS OPTIONS+DATA - UNMOUNT');
+    };
+  }, [validatorOptions, validatorData, onError]);
 
   // Effect hook when an action needs to happen - coming from this component.
   useEffect(() => {
-    if (LOGGING >= 5) console.log('USE EFFECT ACTION');
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT ACTION');
 
     // If redraw is true, reset the property in the action, set the redraw property to true for the chart, then prep a timer to reset it to false after the redraw has happened.
     // A bit funky, but only way I could find without having code in the Parent Component.
@@ -518,17 +605,37 @@ export function GeoChart<
       // Redraw
       performRedraw();
     }
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT ACTION - UNMOUNT');
+    };
   }, [action]);
 
-  /** ******************************************* HOOKS SECTION END ************************************************** */
-  /** ****************************************** RENDER SECTION START ************************************************ */
+  // Effect hook to be executed with i18n
+  useEffect(() => {
+    // Log
+    log(LOG_LEVEL_MEDIUM, 'USE EFFECT ADD_RESOURCE_BUNDLE');
+
+    // Add GeoChart translations file
+    i18n.addResourceBundle('en', 'translation', T_EN);
+    i18n.addResourceBundle('fr', 'translation', T_FR);
+
+    return () => {
+      // Log
+      log(LOG_LEVEL_MAXIMUM, 'USE EFFECT ADD_RESOURCE_BUNDLE - UNMOUNT');
+    };
+  }, [i18n]);
+
+  /** ********************************************* HOOKS SECTION END *************************************************** */
+  /** ******************************************** RENDER SECTION START ************************************************* */
 
   /**
    * Renders the Chart JSX.Element itself using Line as default
    * @returns The Chart JSX.Element itself using Line as default
    */
   const renderChart = (): JSX.Element => {
-    return <ChartReact ref={chartRef} type={chartType!} style={style} data={chartData} options={chartOptions} redraw={redraw} />;
+    return <ChartReact ref={chartRef} type={chartType!} data={chartData} options={chartOptions} redraw={redraw} />;
   };
 
   /**
@@ -540,10 +647,11 @@ export function GeoChart<
     if (inputs && selectedDatasource) {
       if (inputs.chart === 'line' && inputs.geochart.xSlider?.display) {
         return (
-          <Box>
+          <Box sx={sxClasses.xSliderWrapper}>
             <Slider
               min={xSliderMin}
               max={xSliderMax}
+              step={xSliderSteps}
               value={xSliderValues}
               customOnChange={handleSliderXChange}
               onValueDisplay={handleSliderXValueDisplay}
@@ -553,7 +661,8 @@ export function GeoChart<
         );
       }
     }
-    // None
+
+    // Empty
     return <Box />;
   };
 
@@ -565,12 +674,12 @@ export function GeoChart<
     // If inputs
     if (inputs && selectedDatasource) {
       if (inputs.chart === 'line' && inputs.geochart.ySlider?.display) {
-        // Need 100% height to occupy some space, otherwise it's crunched.
         return (
-          <Box sx={{ height: '85%' }}>
+          <Box sx={sxClasses.ySliderWrapper}>
             <Slider
               min={ySliderMin}
               max={ySliderMax}
+              step={ySliderSteps}
               value={ySliderValues}
               orientation="vertical"
               customOnChange={handleSliderYChange}
@@ -581,7 +690,8 @@ export function GeoChart<
         );
       }
     }
-    // None
+
+    // Empty
     return <Box />;
   };
 
@@ -599,6 +709,8 @@ export function GeoChart<
       return (
         <Box>
           <Select
+            sx={sxClasses.datasourceSelector}
+            label={t('geochart.feature')}
             onChange={handleDatasourceChanged}
             menuItems={menuItems}
             value={selectedDatasource?.value || selectedDatasource?.display || ''}
@@ -606,7 +718,8 @@ export function GeoChart<
         </Box>
       );
     }
-    // None
+
+    // Empty
     return <Box />;
   };
 
@@ -616,11 +729,42 @@ export function GeoChart<
    */
   const renderTitle = (): JSX.Element => {
     if (inputs) {
-      // TODO: Remove the marginTop once the Select marginBottom is fixed (there shouldn't be a margin-bottom 16px over in the Select component)
-      const marginTop = '-16px';
-      return <Box sx={{ padding: '10px', fontSize: 'larger', marginTop: { marginTop } }}>{inputs.title}</Box>;
+      return <Box sx={sxClasses.title}>{inputs.title}</Box>;
     }
-    // None
+
+    // Empty
+    return <Box />;
+  };
+
+  /**
+   * Renders the UI Options
+   * @returns The UI Options Element
+   */
+  const renderUIOptions = (): JSX.Element => {
+    if (inputs?.ui) {
+      // If steps switcher
+      if (inputs!.ui.stepsSwitcher) {
+        // Create the menu items
+        const menuItems: (typeof TypeMenuItemProps)[] = [];
+        StepsPossibilitiesConst.forEach((stepOption: string | boolean) => {
+          menuItems.push({ item: { value: stepOption }, content: <Box>{stepOption.toString()}</Box> });
+        });
+
+        return (
+          <Box sx={sxClasses.uiOptions}>
+            <Select
+              sx={sxClasses.uiOptionsStepsSelector}
+              label={t('geochart.steps')}
+              onChange={handleStepsSwitcherChanged}
+              menuItems={menuItems}
+              value={selectedStepSwitcher || false}
+            />
+          </Box>
+        );
+      }
+    }
+
+    // Empty
     return <Box />;
   };
 
@@ -632,11 +776,11 @@ export function GeoChart<
     if (chartData) {
       const { datasets } = chartData;
       if (datasets.length > 1) {
-        const label = chartType === 'pie' || chartType === 'doughnut' ? 'Category:' : '';
+        const label = chartType === 'pie' || chartType === 'doughnut' ? `${t('geochart.category')}:` : '';
         // The 9px padding here is because of alignment issues with the inner-padding used by the checkboxes components
         return (
           <Box>
-            <Typography sx={{ display: 'inline-block', padding: '9px', verticalAlign: 'middle' }}>{label}</Typography>
+            <Typography sx={sxClasses.checkDatasetWrapperLabel}>{label}</Typography>
             {datasets.map((ds: ChartDataset<TType, TData>, idx: number) => {
               let { color } = ChartJS.defaults;
               if (ds.borderColor) color = ds.borderColor! as string;
@@ -651,7 +795,7 @@ export function GeoChart<
                     }}
                     defaultChecked
                   />
-                  <Typography sx={{ ...sxClasses.checkDataset, ...{ color } }} noWrap>
+                  <Typography sx={{ ...sxClasses.checkDatasetLabel, ...{ color } }} noWrap>
                     {ds.label}
                   </Typography>
                 </Box>
@@ -662,7 +806,7 @@ export function GeoChart<
       }
     }
 
-    // None
+    // Empty
     return <Box />;
   };
 
@@ -673,7 +817,7 @@ export function GeoChart<
   const renderDataSelector = (): JSX.Element => {
     if (chartData) {
       const { labels, datasets } = chartData;
-      if ((chartType === 'pie' || chartType === 'doughnut') && labels && datasets && labels.length > 1 && datasets.length > 1) {
+      if ((chartType === 'pie' || chartType === 'doughnut') && labels && datasets && labels.length > 1 && datasets.length >= 1) {
         return (
           <Box>
             {labels.map((lbl: TLabel, idx: number) => {
@@ -689,7 +833,7 @@ export function GeoChart<
                     }}
                     defaultChecked
                   />
-                  <Typography sx={{ ...sxClasses.checkDataset, ...{ color } }} noWrap>
+                  <Typography sx={{ ...sxClasses.checkDatasetLabel, ...{ color } }} noWrap>
                     {lbl}
                   </Typography>
                 </Box>
@@ -700,7 +844,7 @@ export function GeoChart<
       }
     }
 
-    // None
+    // Empty
     return <Box />;
   };
 
@@ -711,20 +855,21 @@ export function GeoChart<
   const renderChartContainer = (): JSX.Element => {
     // If not loading
     if (chartOptions) {
-      // The 1, 11 and 12 used here are as documented online
+      // The xs: 1, 11 and 12 used here are as documented online
       return (
-        <Box>
-          <Grid container sx={style}>
+        <Box sx={{ ...sx, ...sxClasses.mainGeoChartContainer }}>
+          <Grid container>
             <Grid item xs={12}>
-              <Box sx={{ display: 'flex;', alignItems: 'center;' }}>
+              <Box sx={sxClasses.header}>
                 {renderDatasourceSelector()}
                 {renderTitle()}
+                {renderUIOptions()}
               </Box>
               {renderDataSelector()}
               {renderDatasetSelector()}
             </Grid>
-            <Grid item sx={{ position: 'relative;' }} xs={11}>
-              {isLoadingDatasource && <CircularProgress sx={{ backgroundColor: 'transparent', zIndex: 0 }} />}
+            <Grid item sx={sxClasses.chartContent} xs={11}>
+              {isLoadingDatasource && <CircularProgress sx={sxClasses.loadingDatasource} />}
               {renderChart()}
             </Grid>
             <Grid item xs={1}>
@@ -737,6 +882,8 @@ export function GeoChart<
         </Box>
       );
     }
+
+    // Empty
     return <Box />;
   };
 
@@ -746,7 +893,7 @@ export function GeoChart<
    */
   const renderEverything = (): JSX.Element => {
     return (
-      <Box sx={{ minHeight: '400px' }}>
+      <Box sx={sxClasses.mainContainer}>
         {!isLoadingChart && renderChartContainer()}
         {isLoadingChart && <CircularProgress />}
       </Box>
@@ -758,11 +905,15 @@ export function GeoChart<
    * @returns The whole Chart container JSX.Element or an empty box
    */
   const renderChartContainerFailed = (): JSX.Element => {
-    return <Box sx={sxClasses.chartError}>Error rendering the Chart. Check console for details.</Box>;
+    return (
+      <Box sx={sxClasses.chartError}>
+        {t('geochart.parsingError')} {t('geochart.viewConsoleDetails')}
+      </Box>
+    );
   };
 
   // If no errors
-  if (hasValidSchemas()) {
+  if (hasValidSchemas([validatorInputs, validatorOptions, validatorData])) {
     // Render the chart
     return renderEverything();
   }
@@ -775,7 +926,7 @@ export function GeoChart<
  * React's default properties for the GeoChart
  */
 GeoChart.defaultProps = {
-  style: null,
+  sx: null,
   inputs: null,
   chart: 'line',
   options: {
diff --git a/src/logger.ts b/src/logger.ts
new file mode 100644
index 0000000..cd83594
--- /dev/null
+++ b/src/logger.ts
@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+
+// Indicates logging level. The higher the number, the more detailed the log.
+const LOGGING_LEVEL: number = 3;
+
+// Some arbitrary log levels.
+export const LOG_LEVEL_MAXIMUM = 10;
+export const LOG_LEVEL_HIGH = 8;
+export const LOG_LEVEL_MEDIUM = 5;
+export const LOG_LEVEL_LOW = 3;
+export const LOG_LEVEL_MINIMAL = 1;
+
+/**
+ * Checks if the web application is running localhost
+ * @returns boolean true if running localhost
+ */
+const runningLocalhost = (): boolean => {
+  return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+};
+
+/**
+ * Checks if not running localhost and checks that the level is greater or equal to the application logging level.
+ * If both conditions are valid, logs using console.log().
+ * @param level number the level associated with the message to be logged.
+ * @param message string[] the messages to log
+ */
+export const log = (level: number, ...message: unknown[]): void => {
+  // If not running localhost, skip
+  if (!runningLocalhost) return;
+  if (level <= LOGGING_LEVEL) console.log(`${'-'.repeat(level)}>`, ...message);
+};