diff --git a/README.md b/README.md
index c15b7b8e..83022cec 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-31-green)
+![Static Badge](https://img.shields.io/badge/components-32-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -42,6 +42,7 @@ Available components:
 - [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
 - [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
 - [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
+- [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
 
 
 ## Mini charts
diff --git a/package-lock.json b/package-lock.json
index daf57de9..3c7ed907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.41",
+  "version": "1.9.42",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.41",
+      "version": "1.9.42",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 1e22952a..8e98489d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.41",
+  "version": "1.9.42",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -34,7 +34,8 @@
     "rings",
     "wheel",
     "tiremarks",
-    "donut evolution"
+    "donut evolution",
+    "mood radar"
   ],
   "author": "Alec Lloyd Probert",
   "repository": {
diff --git a/src/App.vue b/src/App.vue
index 0de4d7da..7a76c3ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,6 +42,7 @@ import HistoTest from "./components/vue-ui-sparkhistogram.vue";
 import RingsTest from "./components/vue-ui-rings.vue";
 import WheelTest from "./components/vue-ui-wheel.vue";
 import TireTest from "./components/vue-ui-tiremarks.vue";
+import MoodRadarTest from "./components/vue-ui-mood-radar.vue";
 import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
 
 const dataset = ref([
@@ -3567,21 +3568,118 @@ function shootScreenProd() {
   screenshotProd.value.shoot();
 }
 
+const moodRadarDataset = ref({
+  "1": 98,
+  "2": 150,
+  "3": 300,
+  "4": 350,
+  "5": 400
+})
+
+const moodRadarConfig = ref({
+        "useCssAnimation": true,
+        "style": {
+            "fontFamily":"inherit",
+            "chart": {
+                "backgroundColor":"#FFFFFF",
+                "color":"#2D353C",
+                "layout": {
+                    "grid": {
+                        "show": true,
+                        "stroke": "#e1e5e8",
+                        "strokeWidth": 0.5,
+                        "graduations": 5
+                    },
+                    "outerPolygon": {
+                        "stroke":"#e1e5e8",
+                        "strokeWidth":1
+                    },
+                    "dataPolygon": {
+                        "color": "#5f8bee",
+                        "opacity": 60,
+                        "gradient": {
+                            "show": true,
+                            "intensity": 5
+                        },
+                        "stroke":"#5f8bee",
+                        "strokeWidth": 0
+                    },
+                    "smileys": {
+                        "strokeWidth": 1,
+                        "colors": {
+                            "1": "#e20001",
+                            "2": "#ff9f03",
+                            "3": "#ffd004",
+                            "4": "#9ac900",
+                            "5": "#059f00"
+                        }
+                    }
+                },
+                "title": {
+                    "text": "TItle",
+                    "color": "#2D353C",
+                    "fontSize": 20,
+                    "bold": true,
+                    "subtitle": {
+                        "color": "#A1A1A1",
+                        "text": "Subtitle", 
+                        "fontSize": 16,
+                        "bold": false
+                    }
+                },
+                "legend": {
+                    "color": "#2D353C",
+                    "backgroundColor": "#FFFFFF",
+                    "bold": false,
+                    "show": true,
+                    "fontSize": 16,
+                    "roundingPercentage": 0,
+                    "roundingValue": 0
+                }
+            }
+        },
+        "table": {
+            "show": false,
+            "th": {
+                "backgroundColor": "#FAFAFA",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8"
+            },
+            "td": {
+                "backgroundColor": "#FFFFFF",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8",
+                "roundingValue": 0,
+                "roundingPercentage": 0
+            }
+        },
+        "userOptions": {
+            "show": true
+        }
+    })
+
 </script>
 
 <template>
 
   <div style="padding-left: 48px; padding-right: 48px; width: 100%; max-width: 80%;margin: 0 auto">
-      <div style="padding-top: 48px; padding-bottom: 48px;font-weight: bold; line-height: 20px">
-        <h1 style="font-size: 36px; color: #42d392">
-          Vue Data UI
-        </h1>
-        <h2 style="color: #A6A6A6">Components</h2>
-        <h4 style="color: #5f8bee">Manual testing arena</h4>
+      <div style="padding-top: 48px; padding-bottom: 48px;font-weight: bold; line-height: 20px; display: flex; flex-direction:row; gap:24px; align-items:center">
+          <img src="../../vue-data-ui-logo.png" height="128px"/>
+          <!-- <BaseIcon name="chartRelationCircle" :size="118" :strokeWidth="0.8" stroke="#5A5A5A"/> -->
+        <div>
+          <h1 style="font-size: 36px; color: #42d392">
+            Vue Data UI
+          </h1>
+          <h2 style="color: #5A5A5A">Components</h2>
+          <h4 style="color: #5f8bee">Manual testing arena</h4>
+        </div>
       </div>
 
-      <Box open :misc="true">
-      <template #title>__Icons__</template>
+      <Box :misc="true">
+      <template #title>
+        <BaseIcon name="smiley" />
+        VueUiIcon
+      </template>
       <template #misc>
         <div style="display: flex; flex-wrap: wrap; gap: 12px; width: 100%">        
           <BaseIcon name="pdf" />
@@ -3614,7 +3712,11 @@ function shootScreenProd() {
           <BaseIcon name="chartThermometer" stroke="#42d392" />
           <BaseIcon name="chartRadar" stroke="#42d392" />
           <BaseIcon name="chartSparkStackbar" stroke="#42d392" />
+          <BaseIcon name="moodSad" stroke="#42d392" />
+          <BaseIcon name="moodFlat" stroke="#42d392" />
+          <BaseIcon name="moodNeutral" stroke="#42d392" />
           <BaseIcon name="smiley" stroke="#42d392" />
+          <BaseIcon name="moodHappy" stroke="#42d392" />
           <BaseIcon name="star" stroke="#42d392" />
           <BaseIcon name="chartChestnut" stroke="#42d392" />
           <BaseIcon name="chartAgePyramid" stroke="#42d392" />
@@ -3623,12 +3725,30 @@ function shootScreenProd() {
           <BaseIcon name="dashboard" stroke="#42d392" />
           <BaseIcon name="chartHeatmap" stroke="#42d392" />
           <BaseIcon name="chartTable" stroke="#42d392" />
+          <BaseIcon name="chartMoodRadar" stroke="#42d392" />
         </div>
       </template>
       </Box>
 
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mood_radar)">
+        <template #title>
+          <BaseIcon name="chartMoodRadar"/>
+          VueUiMoodRadar
+        </template>
+        <template #dev>
+          <MoodRadarTest :dataset="moodRadarDataset" :config="moodRadarConfig" />
+        </template>
+        <template #prod>
+          <VueUiMoodRadar :dataset="moodRadarDataset" :config="moodRadarConfig" />
+        </template>
+
+      </Box>
+
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_screenshot)">
-        <template #title>VueUiScreenshot</template>
+        <template #title>
+          <BaseIcon name="screenshot"/>
+        VueUiScreenshot
+        </template>
         <template #dev>
           <ScreenshotTest ref="screenshotTest"/>
           <button class="btn--orange" @click="shootScreenTest">SCREENSHOT</button>
@@ -3644,7 +3764,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
-        <template #title>VueUiDonutEvolution</template>
+        <template #title>
+          <BaseIcon name="chartDonutEvolution"/>
+          VueUiDonutEvolution
+        </template>
         <template #dev>
           <DonutEvolutionTest
             :dataset="donutEvolutionDataset"
@@ -3661,7 +3784,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)">
-        <template #title>VueUiTiremarks</template>
+        <template #title>
+          <BaseIcon name="chartTiremarks"/>
+          VueUiTiremarks
+        </template>
         <template #dev>
           <TireTest
             :dataset="tiremarksDataset"
@@ -3678,12 +3804,15 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
+        <template #title>
+          <BaseIcon name="skeleton"/>
+          VueUiSkeleton
+        </template>
         <template #general>
           <select v-model="skeletonChoice">
             <option v-for="(opt) in skeletonOptions">{{ opt }}</option>
           </select>
         </template>
-        <template #title>VueUiSkeleton</template>
         <template #dev>
           <SkeletonTest
             :config="{ type: skeletonChoice, style: { rating: { useSmiley: true, filled: true } } }"
@@ -3700,7 +3829,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)">
-        <template #title>VueUiWheel</template>
+        <template #title>
+          <BaseIcon name="chartWheel"/>  
+          VueUiWheel
+        </template>
         <template #dev>
           <WheelTest
             ref="rings"
@@ -3721,7 +3853,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_rings)">
-        <template #title>VueUiRings</template>
+        <template #title>
+          <BaseIcon name="chartRings" />
+          VueUiRings
+        </template>
         <template #dev>
           <RingsTest
             ref="rings"
@@ -3742,7 +3877,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_relation_circle)">
-        <template #title>VueUiRelationCircle</template>
+        <template #title>
+          <BaseIcon name="chartRelationCircle"/>
+          VueUiRelationCircle
+        </template>
         <template #dev>
           <RelationTest
             ref="relation"
@@ -3763,7 +3901,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
-        <template #title>VueUiSparkline</template>
+        <template #title>
+          <BaseIcon name="chartLine" />
+          VueUiSparkline
+        </template>
         <template #dev>
           <SparklineTest
             :config="sparklineConfig"
@@ -3782,7 +3923,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
-        <template #title>VueUiXy</template>
+        <template #title>
+          <BaseIcon name="chartLine" />
+          VueUiXy
+        </template>
         <template #dev>
           <XyTest
             ref="xytest"
@@ -3807,7 +3951,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
-        <template #title>VueUiSparkHistogram</template>
+        <template #title>
+          <BaseIcon name="chartSparkHistogram" />
+          VueUiSparkHistogram
+        </template>
         <template #dev>
           <HistoTest 
             :dataset="histoDataset" 
@@ -3826,7 +3973,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_candlestick)">
-        <template #title>VueUiCandleStick</template>
+        <template #title>
+          <BaseIcon name="chartCandlestick" />
+          VueUiCandleStick
+        </template>
         <template #dev>
           <CandlestickTest 
             ref="candlestick"
@@ -3847,7 +3997,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
-        <template #title>VueUiScatter</template>
+        <template #title>
+          <BaseIcon name="chartScatter" />
+          VueUiScatter
+        </template>
         <template #dev>
           <ScatterTest 
             ref="scatter" 
@@ -3868,7 +4021,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_vertical_bar)">
-        <template #title>VueUiVerticalBar</template>
+        <template #title>
+          <BaseIcon name="chartVerticalBar" />
+          VueUiVerticalBar
+        </template>
         <template #dev>
           <VerticalTest 
             ref="verticaltest"
@@ -3890,7 +4046,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
-        <template #title>VueUiOnion</template>
+        <template #title>
+          <BaseIcon name="chartOnion" />
+          VueUiOnion
+        </template>
         <template #dev>
           <OnionTest
             :config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
@@ -3912,7 +4071,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
-        <template #title>VueUiQuadrant</template>
+        <template #title>
+          <BaseIcon name="chartQuadrant" />
+          VueUiQuadrant
+        </template>
         <template #dev>
           <QuadrantTest
             ref="quadranttest"
@@ -3939,7 +4101,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_radar)">
-        <template #title>VueUiRadar</template>
+        <template #title>
+          <BaseIcon name="chartRadar" />
+          VueUiRadar
+        </template>
         <template #dev>
           <RadarTest
             ref="radartest"
@@ -3962,7 +4127,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut)">
-        <template #title>VueUiDonut</template>
+        <template #title>
+          <BaseIcon name="chartDonut" />
+          VueUiDonut
+        </template>
         <template #dev>
           <DonutTest
             ref="donuttest"
@@ -4007,7 +4175,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
-        <template #title>VueUiSparkStackbar</template>
+        <template #title>
+          <BaseIcon name="chartSparkStackbar" />
+          VueUiSparkStackbar
+        </template>
         <template #dev>
           <StackTest 
             :dataset="stackDataset"
@@ -4024,7 +4195,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_thermometer)">
-        <template #title>VueUiThermometer</template>
+        <template #title>
+          <BaseIcon name="chartThermometer"/>
+          VueUiThermometer
+        </template>
         <template #dev>
           <ThermoTest 
             ref="thermo" 
@@ -4045,18 +4219,29 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_smiley)">
-        <template #title>VueUiSmiley</template>
+        <template #title>
+          <BaseIcon name="smiley"/>
+          VueUiSmiley
+        </template>
         <template #dev>
           <SmileyTest 
             :dataset="ratingDataset" 
             :config="smileyConfig" 
           />
+          <SmileyTest
+            :dataset="ratingDataset" 
+            :config="{...smileyConfig, readonly: true}" 
+          />
         </template>
         <template #prod>
           <VueUiSmiley
             :dataset="ratingDataset"
             :config="smileyConfig"
           />
+          <VueUiSmiley
+            :dataset="ratingDataset"
+            :config="{...smileyConfig, readonly: true}" 
+          />
         </template>
         <template #config>
           {{ PROD_CONFIG.vue_ui_smiley }}
@@ -4064,7 +4249,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_rating)">
-        <template #title>VueUiRating</template>
+        <template #title>
+          <BaseIcon name="star" />
+          VueUiRating
+        </template>
         <template #dev>
           <RatingTest
             ref="ratingtest"
@@ -4085,7 +4273,10 @@ function shootScreenProd() {
       </Box>
       
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_chestnut)">
-        <template #title>VueUiChestnut</template>
+        <template #title>
+          <BaseIcon name="chartChestnut" />
+          VueUiChestnut
+        </template>
         <template #dev>
           <ChestnutTest
             ref="chestnuttest"
@@ -4110,7 +4301,10 @@ function shootScreenProd() {
       </Box>
       
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_age_pyramid)">
-        <template #title>VueUiPyramid</template>
+        <template #title>
+          <BaseIcon name="chartAgePyramid" />
+          VueUiAgePyramid
+        </template>
         <template #dev>
           <PyramidTest 
             ref="pyramid" 
@@ -4131,7 +4325,10 @@ function shootScreenProd() {
       </Box>
       
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
-        <template #title>VueUiWaffle</template>
+        <template #title>
+          <BaseIcon name="chartWaffle"/>
+          VueUiWaffle
+        </template>
         <template #dev>
           <WaffleTest
             ref="waffletest"
@@ -4154,7 +4351,10 @@ function shootScreenProd() {
       </Box>
       
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_annotator)">
-        <template #title>VueUiAnnotator</template>
+        <template #title>
+          <BaseIcon name="annotator"/>
+          VueUiAnnotator
+        </template>
         <template #dev>
           <AnnotatorTest
             @saveAnnotations="saveAnnotations"
@@ -4208,7 +4408,10 @@ function shootScreenProd() {
 
             
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_dashboard)">
-        <template #title>VueUiDashboard</template>
+        <template #title>
+          <BaseIcon name="dashboard" />
+          VueUiDashboard
+        </template>
         <template #dev>
           <DashboardTest
             ref="dash"
@@ -4243,7 +4446,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
-        <template #title>VueUiSparkbar</template>
+        <template #title>
+          <BaseIcon name="chartVerticalBar"/>
+          VueUiSparkbar
+        </template>
         <template #dev>
           <SparkbarTest
             :config="sparkbarConfig"
@@ -4262,7 +4468,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
-        <template #title>VueUiHeatmap</template>
+        <template #title>
+          <BaseIcon name="chartHeatmap"/>
+          VueUiHeatmap
+        </template>
         <template #dev>
           <HeatmapTest
             ref="heatmaptest"
@@ -4283,7 +4492,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_gauge)">
-        <template #title>VueUiGauge</template>
+        <template #title>
+          <BaseIcon name="chartGauge"/>
+          VueUiGauge
+        </template>
         <template #dev>
           <GaugeTest 
             ref="gaugetest" 
@@ -4302,7 +4514,10 @@ function shootScreenProd() {
       </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_table)">
-        <template #title>VueUiTable</template>
+        <template #title>
+          <BaseIcon name="chartTable"/>
+          VueUiTable
+        </template>
         <template #dev>
           <TableTest 
             :dataset="tableTestDataset" 
@@ -4348,4 +4563,5 @@ function shootScreenProd() {
 .btn--orange:hover {
     background: linear-gradient(to top left, #ff6400, #ff6400AA);
 }
+
 </style>
\ No newline at end of file
diff --git a/src/Box.vue b/src/Box.vue
index d530092a..ecf7001f 100644
--- a/src/Box.vue
+++ b/src/Box.vue
@@ -30,10 +30,10 @@ function copy() {
 <template>
     <div style="width: 100%;margin-top:12px; background: #2A2A2A;">
         <details :open="open">
-            <summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #2A2A2A, #1A1A1A);line-height:24px;font-size:24px;padding:12px;">
-                <span style="color:#42d392">
+            <summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #2A2A2A, #1A1A1A);line-height:24px;font-size:24px;padding:12px; display: flex; align-items:center; gap: 6px">
+                <div style="color:#42d392">
                     <slot name="title"></slot>
-                </span>
+                </div>
             </summary>
             <div style="display: flex; flex-direction: row; gap: 24px; align-items:center;justify-content:center; padding: 24px">
                 <slot name="misc"/>
@@ -117,4 +117,15 @@ summary::marker {
         transform: scale(1, 1);
     }
 }
+
+@keyframes details-show {
+  from {
+    opacity:0;
+    transform: var(--details-translate, translateY(-0.5em));
+  }
+}
+
+details[open] > *:not(summary) {
+  animation: details-show 250ms ease-in-out;
+}
 </style>
\ No newline at end of file
diff --git a/src/atoms/BaseIcon.vue b/src/atoms/BaseIcon.vue
index eef4fa3c..c3f0ae9c 100644
--- a/src/atoms/BaseIcon.vue
+++ b/src/atoms/BaseIcon.vue
@@ -42,8 +42,8 @@ const icons = computed(() => {
         chartTiremarks: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12M15 8 15 12M17 8 17 12M19 8 19 12" />`,
         chartDonutEvolution: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19M3 8A1 1 0 007 8 1 1 0 003 8M8 14A1 1 0 0012 14 1 1 0 008 14M14 4A1 1 0 0018 4 1 1 0 0014 4M7 10 9 12M11 12 15 6" />`,
         screenshot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 4 1 3C1 2 2 1 3 1L4 1M16 1 17 1C18 1 19 2 19 3L19 4M1 16 1 17C1 18 2 19 3 19L4 19M16 19 17 19C18 19 19 18 19 17L19 16M8 10A1 1 0 0012 10 1 1 0 008 10M5 13 5 8C5 7 5 7 6 7L14 7C15 7 15 7 15 8L15 13C15 14 15 14 14 14L6 14C5 14 5 14 5 13M7 6 13 6" />`,
-        chartWheel: `<circle cx="10" cy="10" r="7" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="16"/><circle cx="10" cy="10" r="9" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="2" style="opacity:0.7"/><circle cx="10" cy="10" r="1" fill="${props.stroke}" />`,
-        skeleton: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 14A1 1 0 003 18L7 18A1 1 0 007 14L3 14M3 8A1 1 0 003 12L7 12A1 1 0 007 8L3 8M3 2A1 1 0 003 6L4 6A1 1 0 004 2L3 2M12 10 12 16C12 17 13 18 14 18L17 18C18 18 19 17 19 16L19 10C19 9 18 8 17 8L14 8C13 8 12 9 12 10" />`,
+        chartWheel: `<circle cx="10" cy="10" r="7" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="16" stroke-linecap="round"/><circle cx="10" cy="10" r="9" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="2" stroke-linecap="round" style="opacity:0.7"/><circle cx="10" cy="10" r="1" fill="${props.stroke}" />`,
+        skeleton: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 14A1 1 0 003 18L7 18A1 1 0 007 14L3 14M3 8A1 1 0 003 12L7 12A1 1 0 007 8L3 8M3 2A1 1 0 003 6L4 6A1 1 0 004 2L3 2M12 10 12 16C12 17 13 18 14 18L17 18C18 18 19 17 19 16L19 10C19 9 18 8 17 8L14 8C13 8 12 9 12 10" stroke-dasharray="2" />`,
         chartSparkHistogram: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 11C14 12 15 12 15 12L17 12C18 12 18 11 18 11L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9" />`,
         chartRelationCircle: `<path fill="none" stroke="${props.stroke}" stroke-linecap="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10" />`,
         chartCandlestick: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 14C14 15 15 15 15 15L17 15C18 15 18 14 18 14L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9M4 8 4 5M3 5 5 5M10 13 10 16M9 16 11 16M16 8 16 2M15 2 17 2M10 7 10 4M9 4 11 4M4 12 4 18M3 18 5 18M16 15 16 18M15 18 17 18" />`,
@@ -62,7 +62,12 @@ const icons = computed(() => {
         annotator: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 17 4 12C5 12 7 13 8 15L3 17M4 12 11 2C12 2 14 3 15 5L8 15M3 19C5 19 5 19 8 19 11 19 11 18 13 18 15 18 15 19 19 19M12 1C13 1 15 2 16 4" />`,
         dashboard: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 5A1 1 0 009 5 1 1 0 001 5M5 1 5 5 9 5M1 15 6 15M1 18 8 18M13 9C13 10 13 10 14 10 15 10 15 10 15 9L15 6C15 5 15 5 14 5 13 5 13 5 13 6 13 6 13 8 13 9M17 9C17 10 17 10 18 10 19 10 19 10 19 9L19 4C19 3 19 3 18 3 17 3 17 3 17 4L17 9M9 12 12 18 14 15 17 16 19 13M1 12 4 12" />`,
         chartHeatmap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 2 10 18M2 10 18 10M6 2 6 18M14 2 14 18M2 6 18 6M2 14 18 14"/><rect fill="${props.stroke}" stroke="none" x="2" y="6" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="10" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="14" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="14" y="2" height="4" width="4" style="opacity:0.5" />`,
-        chartTable: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 6 10 18M2 10 18 10M6 2M14 2M2 6 18 6M2 14 18 14M6 8 8 8M6 12 8 12M6 16 8 16M14 8 16 8M14 12 16 12M14 16 16 16" />`
+        chartTable: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 6 10 18M2 10 18 10M6 2M14 2M2 6 18 6M2 14 18 14M6 8 8 8M6 12 8 12M6 16 8 16M14 8 16 8M14 12 16 12M14 16 16 16" />`,
+        moodSad: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 14C6 9 14 9 15 14L5 14M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
+        moodFlat: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 13C8 11 12 11 15 13M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
+        moodNeutral: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 12C9 12 11 12 15 12M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
+        moodHappy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 11C6 18 14 18 15 11L5 11M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
+        chartMoodRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M10 4 4 9 6 16 14 16 16 9 10 4M9 2A1 1 0 0011 2 1 1 0 009 2M1 8A1 1 0 003 8 1 1 0 001 8M3 17A1 1 0 005 17 1 1 0 003 17M15 17A1 1 0 0017 17 1 1 0 0015 17M17 8A1 1 0 0019 8 1 1 0 0017 8M10 7 13 10 13 14 8 13 7 9 10 7" />`
     }
 })
 
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
new file mode 100644
index 00000000..5e006f9e
--- /dev/null
+++ b/src/components/vue-ui-mood-radar.vue
@@ -0,0 +1,465 @@
+<script setup>
+import { ref, computed, nextTick } from "vue";
+import { createPolygonPath, shiftHue, opacity, makeXls } from "../lib";
+import pdf from "../pdf";
+import img from "../img";
+import mainConfig from "../default_configs.json";
+import { useNestedProp } from "../useNestedProp";
+import Title from "../atoms/Title.vue";
+import UserOptions from "../atoms/UserOptions.vue";
+import Legend from "../atoms/Legend.vue";
+import BaseIcon from "../atoms/BaseIcon.vue";
+import DataTable from "../atoms/DataTable.vue";
+
+const props = defineProps({
+    config: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+    dataset: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+});
+
+const uid = ref(`vue-ui-mood-radar-${Math.random()}`);
+
+const defaultConfig = ref(mainConfig.vue_ui_mood_radar);
+
+const isImaging = ref(false);
+const isPrinting = ref(false);
+const moodRadarChart = ref(null);
+const details = ref(null);
+const selectedKey = ref(null)
+
+const radarConfig = computed(() => {
+    return useNestedProp({
+        userConfig: props.config,
+        defaultConfig: defaultConfig.value,
+    });
+});
+
+const mutableConfig = ref({
+    showTable: radarConfig.value.table.show,
+});
+
+const svg = computed(() => {
+    return {
+        height: 256,
+        width: 256,
+    };
+});
+
+const outerPolygon = computed(() => {
+    return createPolygonPath({
+        plot: { x: 128, y: svg.value.height / 2 },
+        radius: 90,
+        sides: 5,
+        rotation: 11,
+    });
+});
+
+function plot({ centerX, centerY, apexX, apexY, proportion, key, value }) {
+    return {
+        x: centerX + (apexX - centerX) * proportion,
+        y: centerY + (apexY - centerY) * proportion,
+        key,
+        value
+    };
+}
+
+const maxValue = computed(() => {
+    return Math.max(...Object.values(props.dataset).map(v => isNaN(v) ? 0 : v));
+});
+
+const grandTotal = computed(() => {
+    return Object.values(props.dataset).reduce((a, b) => (isNaN(a) ? 0 : a) + (isNaN(b) ? 0 : b), 0);
+});
+
+const convertedDataset = computed(() => {
+    return Object.keys(props.dataset)
+        .map((key, i) => {
+            const value = typeof props.dataset[key] !== 'number' || isNaN(props.dataset[key]) ? 0 : props.dataset[key];
+            return {
+                index: i,
+                key,
+                value,
+                proportion: value / grandTotal.value,
+                color: radarConfig.value.style.chart.layout.smileys.colors[key]
+            };
+        })
+        .sort((a, b) => b.key - a.key);
+});
+
+const radar = computed(() => {
+    return outerPolygon.value.coordinates.map((c, i) => {
+        const plots = plot({
+            centerX: svg.value.width / 2,
+            centerY: svg.value.height / 2,
+            apexX: c.x,
+            apexY: c.y,
+            proportion: convertedDataset.value[i].value / maxValue.value,
+            key: convertedDataset.value[i].key,
+            value: convertedDataset.value[i].value
+        });
+        return {
+            ...c,
+            plots,
+            key: convertedDataset.value[i].key,
+        };
+    });
+});
+
+function makePath(plots) {
+    let path = "";
+    plots.forEach((plot) => {
+        path += `${plot.x},${plot.y} `;
+    });
+    return `M${path}Z`;
+}
+
+const legendConfig = computed(() => {
+    return {
+        cy: "mood-radar-legend",
+        backgroundColor: radarConfig.value.style.chart.legend.backgroundColor,
+        color: radarConfig.value.style.chart.legend.color,
+        fontSize: radarConfig.value.style.chart.legend.fontSize,
+        paddingBottom: 12,
+        fontWeight: radarConfig.value.style.chart.legend.bold ? "bold" : "",
+    };
+});
+
+function selectKey(key) {
+    if(key === selectedKey.value) {
+        selectedKey.value = null
+    } else {
+        selectedKey.value = key
+    }
+}
+
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
+    isPrinting.value = true;
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`${uid.value}`),
+            fileName: radarConfig.value.style.chart.title.text || 'vue-ui-mood-radar'
+        }).finally(() => {
+            isPrinting.value = false;
+        });
+    }, 100)
+    
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`${uid.value}`),
+            fileName: radarConfig.value.style.chart.title.text || 'vue-ui-mood-radar',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
+}
+
+const table = computed(() => {
+    const head = convertedDataset.value.map(ds => {
+        return {
+            name: ds.key,
+            color: ds.color
+        }
+    });
+    const body = convertedDataset.value.map(ds => isNaN(ds.value) ? 0 : ds.value);
+    return { head, body };
+});
+
+function generateXls() {
+    nextTick(() => {
+        const labels = table.value.head.map((h,i) => {
+            return [[
+                h.name
+            ],[table.value.body[i]], [isNaN(table.value.body[i] / grandTotal.value) ? '-' : table.value.body[i] / grandTotal.value * 100]]
+        });
+        const tableXls = [[radarConfig.value.style.chart.title.text],[radarConfig.value.style.chart.title.subtitle.text],[[""],["val"],["%"]]].concat(labels);
+
+        makeXls(tableXls, radarConfig.value.style.chart.title.text || "vue-ui-mood-radar");
+    });
+}
+
+const dataTable = computed(() => {
+    const head = [
+        ` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>`,
+        Number(grandTotal.value.toFixed(radarConfig.value.table.td.roundingValue)).toLocaleString(),
+        '100%'
+    ];
+
+    const body = table.value.head.map((h,i) => {
+        return [
+            {
+                color: h.color,
+                name: h.name
+            },
+            table.value.body[i].toFixed(radarConfig.value.table.td.roundingValue),
+            isNaN(table.value.body[i] / grandTotal.value) ? "-" : (table.value.body[i] / grandTotal.value * 100).toFixed(radarConfig.value.table.td.roundingPercentage) + '%'
+        ]
+    });
+
+    const config = {
+        th: {
+            backgroundColor: radarConfig.value.table.th.backgroundColor,
+            color: radarConfig.value.table.th.color,
+            outline: radarConfig.value.table.th.outline
+        },
+        td: {
+            backgroundColor: radarConfig.value.table.td.backgroundColor,
+            color: radarConfig.value.table.td.color,
+            outline: radarConfig.value.table.td.outline
+        }
+    }
+
+    return {
+        head,
+        body,
+        config
+    }
+});
+
+function getData() {
+    return convertedDataset.value;
+}
+
+defineExpose({
+    getData,
+    generatePdf,
+    generateXls,
+    generateImage
+});
+
+</script>
+
+<template>
+    <div :class="`vue-ui-mood-radar ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="moodRadarChart"
+        :id="`${uid}`" :style="`font-family:${radarConfig.style.fontFamily};width:100%; text-align:center;${!radarConfig.style.chart.title.text ? 'padding-top:36px' : ''
+            };background:${radarConfig.style.chart.backgroundColor}`">
+        <div v-if="radarConfig.style.chart.title.text"
+            :style="`width:100%;background:${radarConfig.style.chart.backgroundColor}`">
+            <Title :config="{
+                title: {
+                    cy: 'mood-radar-title',
+                    text: radarConfig.style.chart.title.text,
+                    color: radarConfig.style.chart.title.color,
+                    fontSize: radarConfig.style.chart.title.fontSize,
+                    bold: radarConfig.style.chart.title.bold,
+                },
+                subtitle: {
+                    cy: 'mood-radar-subtitle',
+                    text: radarConfig.style.chart.title.subtitle.text,
+                    color: radarConfig.style.chart.title.subtitle.color,
+                    fontSize: radarConfig.style.chart.title.subtitle.fontSize,
+                    bold: radarConfig.style.chart.title.subtitle.bold,
+                },
+            }" />
+        </div>
+
+        <!-- OPTIONS -->
+        <UserOptions
+            ref="details"
+            v-if="radarConfig.userOptions.show"
+            :backgroundColor="radarConfig.style.chart.backgroundColor"
+            :color="radarConfig.style.chart.color"
+            :isPrinting="isPrinting"
+            :isImaging="isImaging"
+            :title="radarConfig.userOptions.title"
+            :uid="uid"
+            hasImg
+            hasTable
+            @generatePdf="generatePdf"
+            @generateXls="generateXls"
+            @generateImage="generateImage"
+            @toggleTable="mutableConfig.showTable = !mutableConfig.showTable"
+        />
+
+        <svg :viewBox="`0 0 ${svg.width} ${svg.height}`"
+            :style="`max-width:100%;overflow:visible;background:${radarConfig.style.chart.backgroundColor};color:${radarConfig.style.chart.color}`">
+            <!-- DEFS -->
+            <defs>
+                <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" :id="`mood_radar_gradient_${uid}`">
+                    <stop offset="0%" :stop-color="radarConfig.style.chart.layout.dataPolygon.color +
+                        opacity[radarConfig.style.chart.layout.dataPolygon.opacity]
+                        " />
+                    <stop offset="100%" :stop-color="`${shiftHue(
+                        radarConfig.style.chart.layout.dataPolygon.color,
+                        radarConfig.style.chart.layout.dataPolygon.gradient.intensity / 100
+                    )}${opacity[radarConfig.style.chart.layout.dataPolygon.opacity]}`" />
+                </radialGradient>
+            </defs>
+
+            <!-- GRID -->
+            <!-- RADIAL LINES -->
+            <line v-for="line in outerPolygon.coordinates" :x1="svg.width / 2" :y1="svg.height / 2" :x2="line.x"
+                :y2="line.y" :stroke="radarConfig.style.chart.layout.grid.stroke"
+                :stroke-width="radarConfig.style.chart.layout.grid.strokeWidth" />
+            <!-- OUTER POLYGON -->
+            <path :d="outerPolygon.path" fill="none" :stroke="radarConfig.style.chart.layout.outerPolygon.stroke"
+                :stroke-width="radarConfig.style.chart.layout.outerPolygon.strokeWidth" stroke-linejoin="round"
+                stroke-linecap="round" />
+
+
+            <!-- ICON 5 -->
+            <path fill="none" :stroke="radarConfig.style.chart.layout.smileys.colors['5']" stroke-width="1"
+                stroke-linecap="round"
+                d="M119 25A1 1 0 00137 25 1 1 0 00119 25M123 26C124 33 132 33 133 26L123 26M123 22A1 1 0 00126 22 1 1 0 00123 22M130 22A1 1 0 00133 22 1 1 0 00130 22" />
+                <!-- TRAP -->
+                <circle class="vue-ui-mood-radar-trap" @mouseenter="selectedKey = 5" @mouseleave="selectedKey = null" cx="128" cy="25" r="20" :fill="selectedKey === 5 ? radarConfig.style.chart.layout.smileys.colors['5']+'33' : 'transparent'"/>
+
+            <!-- ICON 4 -->
+            <path fill="none" :stroke="radarConfig.style.chart.layout.smileys.colors['4']" stroke-width="1"
+                stroke-linecap="round"
+                d="M218 95A1 1 0 00236 95 1 1 0 00218 95M222 97C225 99 229 99 232 97M222 92A1 1 0 00225 92 1 1 0 00222 92M229 92A1 1 0 00232 92 1 1 0 00229 92" />
+                <!-- TRAP -->
+                <circle class="vue-ui-mood-radar-trap" @mouseenter="selectedKey = 4" @mouseleave="selectedKey = null"  cx="227" cy="95.5" r="20" :fill="selectedKey === 4 ? radarConfig.style.chart.layout.smileys.colors['4']+'33' : 'transparent'"/>
+
+            <!-- ICON 3 -->
+            <path fill="none" :stroke="radarConfig.style.chart.layout.smileys.colors['3']" stroke-width="1"
+                stroke-linecap="round"
+                d="M181 213A1 1 0 00199 213 1 1 0 00181 213M185 210A1 1 0 00188 210 1 1 0 00185 210M192 210A1 1 0 00195 210 1 1 0 00192 210M185 215 195 215" />
+                <!-- TRAP -->
+                <circle class="vue-ui-mood-radar-trap" @mouseenter="selectedKey = 3" @mouseleave="selectedKey = null"  cx="190" cy="213.5" r="20" :fill="selectedKey === 3 ? radarConfig.style.chart.layout.smileys.colors['3']+'33' : 'transparent'"/>
+
+
+            <!-- ICON 2 -->
+            <path fill="none" :stroke="radarConfig.style.chart.layout.smileys.colors['2']" stroke-width="1"
+                stroke-linecap="round"
+                d="M56 213A1 1 0 0074 213 1 1 0 0056 213M60 216C63 214 67 214 70 216M60 210A1 1 0 0063 210 1 1 0 0060 210M67 210A1 1 0 0070 210 1 1 0 0067 210" />
+                <!-- TRAP -->
+                <circle class="vue-ui-mood-radar-trap" @mouseenter="selectedKey = 2" @mouseleave="selectedKey = null"  cx="65" cy="213.5" r="20" :fill="selectedKey === 2 ? radarConfig.style.chart.layout.smileys.colors['2']+'33' :  'transparent'"/>
+
+            <!-- ICON 1 -->
+            <path fill="none" :stroke="radarConfig.style.chart.layout.smileys.colors['1']" stroke-width="1"
+                stroke-linecap="round"
+                d="M20 96A1 1 0 0038 96 1 1 0 0020 96M24 100C25 95 33 95 34 100L24 100M24 93A1 1 0 0027 93 1 1 0 0024 93M31 93A1 1 0 0034 93 1 1 0 0031 93" />
+                <!-- TRAP -->
+                <circle class="vue-ui-mood-radar-trap" @mouseenter="selectedKey = 1" @mouseleave="selectedKey = null"  cx="29" cy="95.5" r="20" :fill="selectedKey === 1 ? radarConfig.style.chart.layout.smileys.colors['1']+'33' : 'transparent'"/>
+
+            <path :d="makePath(radar.map((r) => r.plots))" :stroke="radarConfig.style.chart.layout.dataPolygon.stroke"
+                :stroke-width="radarConfig.style.chart.layout.dataPolygon.strokeWidth" stroke-linecap="round"
+                stroke-linejoin="round" :fill="radarConfig.style.chart.layout.dataPolygon.gradient.show
+                        ? `url(#mood_radar_gradient_${uid})`
+                        : radarConfig.style.chart.layout.dataPolygon.color +
+                        opacity[radarConfig.style.chart.layout.dataPolygon.opacity]
+            " />
+
+                <g v-for="(plot, i) in radar.map(r => r.plots)" class="vue-ui-mood-radar-trap" :style="`opacity:${selectedKey == plot.key ? '1' : '0'}`">
+                    <line 
+
+                        :x1="plot.x"
+                        :y1="plot.y"
+                        :x2="128"
+                        :y2="128"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[plot.key]"
+                    />
+                    <circle  :cx="plot.x" :cy="plot.y" :fill="radarConfig.style.chart.layout.smileys.colors[plot.key]" r="3" :stroke="radarConfig.style.chart.backgroundColor" :stroke-width="0.5" />
+                    <circle  :cx="128" :cy="128" :fill="radarConfig.style.chart.layout.smileys.colors[plot.key]" r="3" :stroke="radarConfig.style.chart.backgroundColor" :stroke-width="0.5" />
+                    <text 
+
+                        :x="128"
+                        :y="['5', 5].includes(plot.key) ? 145 : 120"
+                        :fill="radarConfig.style.chart.layout.dataLabel.color"
+                        font-size="12"
+                        text-anchor="middle"
+                        :font-weight="radarConfig.style.chart.layout.dataLabel.bold ? 'bold' : 'normal'"
+                    >
+                        {{ Number(plot.value.toFixed(radarConfig.style.chart.layout.dataLabel.roundingValue)).toLocaleString() }}
+                    </text>
+                    <text 
+
+                        :x="128"
+                        :y="['5', 5].includes(plot.key) ? 163 : 102"
+                        :fill="radarConfig.style.chart.layout.dataLabel.color"
+                        font-size="12"
+                        text-anchor="middle"
+                    >
+                        ({{ Number((plot.value / grandTotal * 100).toFixed(radarConfig.style.chart.layout.dataLabel.roundingPercentage)).toLocaleString() }}%)
+                    </text>
+
+                </g>
+
+        </svg>
+
+        <!-- LEGEND AS DIV -->
+        <Legend v-if="radarConfig.style.chart.legend.show" :legendSet="convertedDataset" :config="legendConfig"
+            style="display: flex; row-gap: 6px">
+            <template #item="{ legend, index }">
+                <div @click="() => selectKey(legend.key)" style="
+            display: flex;
+            flex-direction: row;
+            gap: 3px;
+            align-items: center;
+            margin: 3px 0;
+          ">
+                    <BaseIcon :strokeWidth="1" v-if="legend.key == 1" name="moodSad"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[legend.key]" />
+                    <BaseIcon :strokeWidth="1" v-if="legend.key == 2" name="moodFlat"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[legend.key]" />
+                    <BaseIcon :strokeWidth="1" v-if="legend.key == 3" name="moodNeutral"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[legend.key]" />
+                    <BaseIcon :strokeWidth="1" v-if="legend.key == 4" name="smiley"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[legend.key]" />
+                    <BaseIcon :strokeWidth="1" v-if="legend.key == 5" name="moodHappy"
+                        :stroke="radarConfig.style.chart.layout.smileys.colors[legend.key]" />
+                    <span style="font-weight: bold">{{ legend.value }}</span> ({{
+                        (isNaN(legend.proportion) ? 0 : legend.proportion * 100).toFixed(
+                            radarConfig.style.chart.legend.roundingPercentage
+                        )
+                    }}%)
+                </div>
+            </template>
+        </Legend>
+
+        <!-- DATA TABLE -->
+        <DataTable
+            v-if="mutableConfig.showTable"
+            :head="dataTable.head" 
+            :body="dataTable.body"
+            :config="dataTable.config"
+            :title="`${radarConfig.style.chart.title.text}${radarConfig.style.chart.title.subtitle.text ? ` : ${radarConfig.style.chart.title.subtitle.text}` : ''}`"
+        >
+            <template #th="{th}">
+                <div v-html="th" style="display:flex;align-items:center"></div>
+            </template>
+            <template #td="{td}">
+                {{ td.name || td }}
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<style scoped>
+.vue-ui-mood-radar *{
+    transition: unset;
+}
+.vue-ui-mood-radar {
+    user-select: none;
+    position: relative;
+}
+.vue-ui-mood-radar-trap {
+    transition: all 0.2s ease-in-out;
+}
+</style>
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index 3f8c7f04..4d8dd4b6 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -10,7 +10,6 @@ import UserOptions from "../atoms/UserOptions.vue";
 import Tooltip from "../atoms/Tooltip.vue";
 import SparkBar from "./vue-ui-sparkbar.vue";
 import Legend from "../atoms/Legend.vue";
-import BaseCheckbox from "../atoms/BaseCheckbox.vue";
 
 const props = defineProps({
     config: {
diff --git a/src/components/vue-ui-screenshot.vue b/src/components/vue-ui-screenshot.vue
index dbeff8dd..62d3175d 100644
--- a/src/components/vue-ui-screenshot.vue
+++ b/src/components/vue-ui-screenshot.vue
@@ -259,13 +259,8 @@ const emit = defineEmits(['postImage']);
 
 function animateSaveButton() {
     const button = document.getElementById(`vue-ui-screenshot-button-${uid.value}`);
-    button.innerHTML = `<svg id="saveButtonSvg" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
-    <path d="M4 16v2a2 2 0 0 0 2 2h2" />
-    <path d="M16 4h2a2 2 0 0 1 2 2v2" />
-    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
-    <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+    button.innerHTML = `<svg id="saveButtonSvg" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 20 20" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path fill="none" stroke="currentColor" d="M1 4 1 3C1 2 2 1 3 1L4 1M16 1 17 1C18 1 19 2 19 3L19 4M1 16 1 17C1 18 2 19 3 19L4 19M16 19 17 19C18 19 19 18 19 17L19 16M8 10A1 1 0 0012 10 1 1 0 008 10M5 13 5 8C5 7 5 7 6 7L14 7C15 7 15 7 15 8L15 13C15 14 15 14 14 14L6 14C5 14 5 14 5 13M7 6 13 6" />
     </svg>`;
 
     document.getElementById(`vue-ui-screenshot-button-${uid.value}`).animate([
@@ -354,7 +349,7 @@ function createHandles(o) {
     SE.dataset.cy = "screenshot-handle-se";
 
     const saveButton = document.createElement("BUTTON");
-    saveButton.innerHTML = `<svg id="saveButtonSvg" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg><span>${screenshotConfig.value.translations.captureButton}</span>`;
+    saveButton.innerHTML = `<svg id="saveButtonSvg" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 20 20" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path fill="none" stroke="currentColor" d="M1 4 1 3C1 2 2 1 3 1L4 1M16 1 17 1C18 1 19 2 19 3L19 4M1 16 1 17C1 18 2 19 3 19L4 19M16 19 17 19C18 19 19 18 19 17L19 16M8 10A1 1 0 0012 10 1 1 0 008 10M5 13 5 8C5 7 5 7 6 7L14 7C15 7 15 7 15 8L15 13C15 14 15 14 14 14L6 14C5 14 5 14 5 13M7 6 13 6" /></svg><span>${screenshotConfig.value.translations.captureButton}</span>`;
 
     saveButton.classList.add("vue-ui-screenshot-capture-button");
     saveButton.id = `vue-ui-screenshot-button-${uid.value}`;
diff --git a/src/default_configs.json b/src/default_configs.json
index 76498c0b..9e21cb75 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -2721,5 +2721,92 @@
         "userOptions": {
             "show": true
         }
+    },
+    "vue_ui_mood_radar": {
+        "useCssAnimation": true,
+        "style": {
+            "fontFamily":"inherit",
+            "chart": {
+                "backgroundColor":"#FFFFFF",
+                "color":"#2D353C",
+                "layout": {
+                    "grid": {
+                        "show": true,
+                        "stroke": "#e1e5e8",
+                        "strokeWidth": 0.5,
+                        "graduations": 5
+                    },
+                    "outerPolygon": {
+                        "stroke":"#e1e5e8",
+                        "strokeWidth":1
+                    },
+                    "dataPolygon": {
+                        "color": "#5f8bee",
+                        "opacity": 60,
+                        "gradient": {
+                            "show": true,
+                            "intensity": 5
+                        },
+                        "stroke":"#5f8bee",
+                        "strokeWidth": 0
+                    },
+                    "smileys": {
+                        "strokeWidth": 1,
+                        "colors": {
+                            "1": "#e20001",
+                            "2": "#ff9f03",
+                            "3": "#ffd004",
+                            "4": "#9ac900",
+                            "5": "#059f00"
+                        }
+                    },
+                    "dataLabel": {
+                        "color": "#2D353C",
+                        "roundingPercentage": 0,
+                        "roundingValue": 0,
+                        "bold":true
+                    }
+                },
+                "title": {
+                    "text": "",
+                    "color": "#2D353C",
+                    "fontSize": 20,
+                    "bold": true,
+                    "subtitle": {
+                        "color": "#A1A1A1",
+                        "text": "", 
+                        "fontSize": 16,
+                        "bold": false
+                    }
+                },
+                "legend": {
+                    "color": "#2D353C",
+                    "backgroundColor": "#FFFFFF",
+                    "bold": false,
+                    "show": true,
+                    "fontSize": 16,
+                    "roundingPercentage": 0,
+                    "roundingValue": 0
+                }
+            }
+        },
+        "table": {
+            "show": false,
+            "th": {
+                "backgroundColor": "#FAFAFA",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8"
+            },
+            "td": {
+                "backgroundColor": "#FFFFFF",
+                "color": "#2D353C",
+                "outline": "1px solid #e1e5e8",
+                "roundingValue": 0,
+                "roundingPercentage": 0
+            }
+        },
+        "userOptions": {
+            "show": true
+        }
     }
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a26ec75a..800dc819 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,7 @@ import VueUiWheel from "./components/vue-ui-wheel.vue";
 import VueUiTiremarks from "./components/vue-ui-tiremarks.vue";
 import VueUiDonutEvolution from "./components/vue-ui-donut-evolution.vue";
 import VueUiIcon from "./atoms/BaseIcon.vue";
+import VueUiMoodRadar from "./components/vue-ui-mood-radar.vue";
 
 export { 
     VueUiXy, 
@@ -61,5 +62,6 @@ export {
     VueUiWheel,
     VueUiTiremarks,
     VueUiDonutEvolution,
-    VueUiIcon
+    VueUiIcon,
+    VueUiMoodRadar
 };
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 18fa673d..738f68f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,7 +32,8 @@ import {
     VueUiWheel,
     VueUiTiremarks,
     VueUiDonutEvolution,
-    VueUiIcon
+    VueUiIcon,
+    VueUiMoodRadar
 } from 'vue-data-ui';
 import 'vue-data-ui/style.css';
 
@@ -68,4 +69,5 @@ app.component("VueUiWheel", VueUiWheel);
 app.component("VueUiTiremarks", VueUiTiremarks);
 app.component("VueUiDonutEvolution", VueUiDonutEvolution);
 app.component("VueUiIcon", VueUiIcon);
+app.component("VueUiMoodRadar", VueUiMoodRadar);
 app.mount('#app');
\ No newline at end of file
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 092324c0..d6b62d0a 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -5,6 +5,107 @@ declare module 'vue-data-ui' {
         [key: string]: unknown;
     }
 
+    export type VueUiMoodRadarDataset = {
+        "1": number;
+        "2": number;
+        "3": number;
+        "4": number;
+        "5": number;
+    }
+
+    export type VueUiMoodRadarConfig = {
+        useCssAnimation?: boolean;
+        style?: {
+            fontFamily?: string;
+            chart?: {
+                backgroundColor?: string;
+                color?: string;
+                layout?: {
+                    grid?: {
+                        show?: boolean;
+                        stroke?: string;
+                        strokeWidth?: number;
+                        graduations?: number;
+                    };
+                    outerPolygon?: {
+                        stroke?: string;
+                        strokeWidth?: number;
+                    };
+                    dataPolygon?: {
+                        color?: string;
+                        opacity?: 60,
+                        gradient?: {
+                            show?: boolean;
+                            intensity?: number;
+                        };
+                        stroke?: string;
+                        strokeWidth?: number;
+                    };
+                    smileys?: {
+                        strokeWidth?: number;
+                        colors?: {
+                            "1": string;
+                            "2": string;
+                            "3": string;
+                            "4": string;
+                            "5": string;
+                        };
+                    };
+                    dataLabel?: {
+                        color?: string;
+                        roundingPercentage?: number;
+                        roundingValue?: number;
+                        bold?: boolean;
+                    };
+                };
+                title?: {
+                    text?: string;
+                    color?: string;
+                    fontSize?: number;
+                    bold?: boolean;
+                    subtitle?: {
+                        color?: string;
+                        text?: string;
+                        fontSize?: number;
+                        bold?: boolean;
+                    };
+                };
+                legend?: {
+                    color?: string;
+                    backgroundColor?: string;
+                    bold?: boolean;
+                    show?: boolean;
+                    fontSize?: number;
+                    roundingPercentage?: number;
+                    roundingValue?: number;
+                };
+            };
+        };
+        table?: {
+            show?: boolean;
+            th?: {
+                backgroundColor?: string;
+                color?: string;
+                outline?: string;
+            };
+            td?: {
+                backgroundColor?: string;
+                color?: string;
+                outline?: string;
+                roundingValue?: number;
+                roundingPercentage?: number;
+            };
+        };
+        userOptions?: {
+            show?: boolean;
+        };
+    };
+
+    export const VueUiMoodRadar: DefineComponent<{
+        dataset: VueUiMoodRadarDataset,
+        config?: VueUiMoodRadarConfig
+    }>;
+
     export const VueUiIcon: DefineComponent<{
         name: string;
         stroke?: string;
diff --git a/vue-data-ui-logo.png b/vue-data-ui-logo.png
new file mode 100644
index 00000000..83bad3d5
Binary files /dev/null and b/vue-data-ui-logo.png differ