diff --git a/main.js b/main.js
index 70424c7..1bd6507 100644
--- a/main.js
+++ b/main.js
@@ -19,7 +19,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `.HN93ol6hjmqa9ixa1Odg {
     display: grid;
-    width: 800px;
+    width: 100%;
 }
 
 .K7QRbesCPgzfdd0p29DY {
@@ -515,8 +515,6 @@ var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 (() => {
 
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(893);
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -4302,6 +4300,8 @@ function useTheme_useTheme(defaultTheme = systemDefaultTheme) {
   return useThemeWithoutDefault(defaultTheme);
 }
 /* harmony default export */ const esm_useTheme = (useTheme_useTheme);
+// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(893);
 ;// CONCATENATED MODULE: ./node_modules/@mui/system/esm/createBox.js
 'use client';
 
@@ -5353,6 +5353,24 @@ const Box = createBox({
 ;// CONCATENATED MODULE: ./src/chart/chart-types.ts
 var EVENT_CHART_CHANGED = "chart/changed";
 var EVENT_CHART_PARSE = "chart/parse";
+
+/**
+ * Main props for the Chart
+ */
+
+/**
+ * Type definition for ChartPayloadChanged
+ *
+ * @exports
+ * @class ChartPayloadChanged
+ */
+
+/**
+ * Type definition for ChartPayloadParse
+ *
+ * @exports
+ * @class ChartPayloadChanged
+ */
 ;// CONCATENATED MODULE: ./src/chart/chart-parser.tsx
 var COLOR_PALETTE = ['purple', 'hotpink', 'pink', 'lavender', 'red'];
 function formatTypeFeaturePropsDataset(featProps, optionsParams) {
@@ -5412,10 +5430,12 @@ data, optionsParams) {
   if ('type' in data && data.type === 'Feature') {
     return formatTypeFeatureJson(data, optionsParams);
   }
+
   // If working with 'FeatureCollection' data
   if ('type' in data && data.type === 'FeatureCollection') {
     return formatTypeFeatureCollectionJson(data, optionsParams);
   }
+
   // Default Chart.js data
   return data;
 }
@@ -5431,12 +5451,15 @@ data, optionsParams) {
       }
     }
   };
+
   // Cast to OptionsGeoView
   var theOptionsGeoView = theOptions;
+
   // The basic geoview options
   theOptionsGeoView.geochart = {
     chart: optionsParams.chart
   };
+
   // Return the complete options
   return theOptions;
 }
@@ -20421,13 +20444,15 @@ function ChartDoughnut(props) {
   var data = props.data,
     options = props.options;
   Chart.register(ArcElement, plugin_tooltip, plugin_legend);
+
   // useEffect(() => {
   //   console.log("ChartDoughnut useEffect Hey")
   //   return () => {
   //     console.log("ChartDoughnut useEffect Kill")
   //   };
   // }, []);
-  return (0,jsx_runtime.jsx)(Doughnut, {
+
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Doughnut, {
     data: data,
     options: options
   });
@@ -20446,13 +20471,15 @@ function ChartBarsVertical(props) {
   var data = props.data,
     options = props.options;
   Chart.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
+
   // useEffect(() => {
   //   console.log("ChartBarsVertical useEffect Hey")
   //   return () => {
   //     console.log("ChartBarsVertical useEffect Kill")
   //   };
   // }, []);
-  return (0,jsx_runtime.jsx)(Bar, {
+
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Bar, {
     data: data,
     options: options
   });
@@ -20471,13 +20498,15 @@ function ChartPie(props) {
   var data = props.data,
     options = props.options;
   Chart.register(ArcElement, plugin_tooltip, plugin_legend);
+
   // useEffect(() => {
   //   console.log("ChartPie useEffect Hey")
   //   return () => {
   //     console.log("ChartPie useEffect Kill")
   //   };
   // }, []);
-  return (0,jsx_runtime.jsx)(Pie, {
+
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Pie, {
     data: data,
     options: options
   });
@@ -20496,13 +20525,15 @@ function ChartLine(props) {
   var data = props.data,
     options = props.options;
   Chart.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
+
   // useEffect(() => {
   //   console.log("ChartLine useEffect Hey")
   //   return () => {
   //     console.log("ChartLine useEffect Kill")
   //   };
   // }, []);
-  return (0,jsx_runtime.jsx)(Line, {
+
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(Line, {
     data: data,
     options: options
   });
@@ -20558,7 +20589,6 @@ var update = injectStylesIntoStyleTag_default()(chart_module/* default */.Z, opt
 
 ;// CONCATENATED MODULE: ./src/chart/chart.tsx
 
-
 // import { useEffect, useState } from 'react';
 
 
@@ -20568,12 +20598,15 @@ var update = injectStylesIntoStyleTag_default()(chart_module/* default */.Z, opt
 
 
 
+
 /**
  * Create a customized Chart UI
  *
  * @param {TypeChartProps} props the properties passed to the Chart element
  * @returns {JSX.Element} the created Chart element
  */
+
+
 function chart_Chart(props) {
   // Fetch the cgpv module
   var w = window;
@@ -20602,6 +20635,7 @@ function chart_Chart(props) {
     var funcHandlerChartChanged = function funcHandlerChartChanged(e) {
       // Cast
       var p = e.detail;
+
       // If some data is specified
       if (p.data) {
         // Set data
@@ -20613,19 +20647,24 @@ function chart_Chart(props) {
         setOptions(p.options);
       }
     };
+
     // Function to handle EVENT_CHART_PARSE
     var funcHandlerChartParse = function funcHandlerChartParse(e) {
       // Cast
       var p = e.detail;
+
       // Perform parsing
       var dataParsed = formatGenericData(p.data, p.optionsParams);
       var optionsParsed = formatGenericOptions(p.data, p.optionsParams);
+
       // Callback with the results
       e.detail.callback(dataParsed, optionsParsed);
     };
+
     // TODO: Use something else than 'window'?
     // Wire handler
     w.addEventListener(EVENT_CHART_CHANGED, funcHandlerChartChanged);
+
     // TODO: Use something else than 'window'?
     // Wire handler
     w.addEventListener(EVENT_CHART_PARSE, funcHandlerChartParse);
@@ -20640,8 +20679,8 @@ function chart_Chart(props) {
     switch (options.geochart.chart) {
       case 'bar':
         // Vertical Bars Chart
-        return (0,jsx_runtime.jsx)("div", {
-          children: (0,jsx_runtime.jsx)(ChartBarsVertical, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(ChartBarsVertical, {
             type: "bar",
             data: data,
             options: options
@@ -20649,21 +20688,21 @@ function chart_Chart(props) {
         });
       case 'pie':
         // Pie Chart
-        return (0,jsx_runtime.jsx)(ChartPie, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(ChartPie, {
           type: "pie",
           data: data,
           options: options
         });
       case 'doughnut':
         // Doughnut Chart
-        return (0,jsx_runtime.jsx)(ChartDoughnut, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(ChartDoughnut, {
           type: "doughnut",
           data: data,
           options: options
         });
       default:
         // Line Chart is default
-        return (0,jsx_runtime.jsx)(ChartLine, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(ChartLine, {
           type: "line",
           data: data,
           options: options
@@ -20674,11 +20713,11 @@ function chart_Chart(props) {
     if (options) {
       var xSlider = options.geochart.xSlider;
       if (xSlider !== null && xSlider !== void 0 && xSlider.display) {
-        return (0,jsx_runtime.jsx)(Box_Box, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(Box_Box, {
           sx: {
             height: '100%'
           },
-          children: (0,jsx_runtime.jsx)(Slider, {
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
             sliderId: "sliderHorizontal",
             min: xSlider.min || 0,
             max: xSlider.max || 100,
@@ -20702,17 +20741,17 @@ function chart_Chart(props) {
       }
     }
     // None
-    return (0,jsx_runtime.jsx)("div", {});
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {});
   }
   function renderYSlider() {
     if (options) {
       var ySlider = options.geochart.ySlider;
       if (ySlider !== null && ySlider !== void 0 && ySlider.display) {
-        return (0,jsx_runtime.jsx)(Box_Box, {
+        return /*#__PURE__*/(0,jsx_runtime.jsx)(Box_Box, {
           sx: {
             height: '100%'
           },
-          children: (0,jsx_runtime.jsx)(Slider, {
+          children: /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
             sliderId: "sliderVertical",
             min: ySlider.min || 0,
             max: ySlider.max || 100,
@@ -20736,26 +20775,26 @@ function chart_Chart(props) {
         });
       }
     }
-    return (0,jsx_runtime.jsx)("div", {});
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {});
   }
   function renderChartContainer() {
-    return (0,jsx_runtime.jsxs)("div", {
+    return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: chart_chart_module.chartContainer,
-      children: [(0,jsx_runtime.jsx)("div", {
+      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: chart_chart_module.chartContainerGrid1,
         children: renderChart()
-      }), (0,jsx_runtime.jsx)("div", {
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: chart_chart_module.chartContainerGrid2,
         children: renderYSlider()
-      }), (0,jsx_runtime.jsx)("div", {
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: chart_chart_module.chartContainerGrid3,
         children: renderXSlider()
-      }), (0,jsx_runtime.jsx)("div", {
+      }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: chart_chart_module.chartContainerGrid4
       })]
     });
   }
-  return (0,jsx_runtime.jsx)("div", {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     children: renderChartContainer()
   });
 }
@@ -20767,9 +20806,10 @@ function chart_Chart(props) {
  *
  * @returns {JSX.Elemet} the element that creates the container and the map
  */
+
 var App = function App() {
-  return (0,jsx_runtime.jsx)("div", {
-    children: (0,jsx_runtime.jsx)(chart_Chart, {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)(chart_Chart, {
       data: {
         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
         datasets: [{
@@ -20793,13 +20833,14 @@ var App = function App() {
 
 
 // Fetch the cgpv module
+
 var w = window;
 var cgpv = w['cgpv'];
 var react = cgpv.react,
   createRoot = cgpv.createRoot;
 var container = createRoot(document.getElementById("root"));
-container.render((0,jsx_runtime.jsx)(react.StrictMode, {
-  children: (0,jsx_runtime.jsx)(src_App, {})
+container.render( /*#__PURE__*/(0,jsx_runtime.jsx)(react.StrictMode, {
+  children: /*#__PURE__*/(0,jsx_runtime.jsx)(src_App, {})
 }));
 })();