docs(radialgauge): add kb for showing value

Author: filipKovachev

knowledge-base/examples/radial-gauge-value/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')

knowledge-base/examples/radial-gauge-value/main.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="gauge-container">
+      <div class="gauge-wrapper">
+        <RadialGauge :pointer="pointer" />
+      </div>
+      <div class="gauge-value">{{ value }}</div>
+    </div>
+  </template>
+  <script>
+  import { RadialGauge } from '@progress/kendo-vue-gauges';
+  
+  export default {
+    components: {
+      RadialGauge,
+    },
+    computed: {
+      pointer() {
+        return { value: this.value };
+      },
+    },
+    mounted() {
+      setInterval(() => {
+        this.value = Math.ceil(Math.random() * 100);
+      }, 1000);
+    },
+    data() {
+      return {
+        value: 30,
+      };
+    },
+  };
+  </script>
+  <style scoped>
+  .gauge-value {
+    position: relative;
+    left: 0;
+    right: 0;
+    top: -40px;
+    text-align: center;
+  }
+  </style>
+  

knowledge-base/radial-gauge-value.md

@@ -0,0 +1,39 @@
+---
+title: Display Value for the RadialGauge
+description: An example of how to display the value in the Kendo UI for Vue Native RadialGauge.
+type: how-to
+page_title: Display Value for the RadialGauge - Kendo UI for Vue RadialGauge
+slug: radial-gauge-value
+tags: radialgauge, gauge, value
+res_type: kb
+category: knowledge-base
+---
+
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>3.3.13</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+How can I show the value of the RadialGauge in the center?
+
+## Solution
+
+This can be achieved by rendering a custom label element with the value inside that is relatively positioned:
+
+{% meta id height:500 %}
+{% embed_file radial-gauge-value/main.vue preview %}
+{% embed_file radial-gauge-value/main.js  %}
+{% endmeta %}