diff --git a/package.json b/package.json
index fb9b5c0..00d56a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.0",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/App.vue b/src/App.vue
index 2cbc62d..ceeecbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,26 +41,20 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress :progress="progress" reverse :data="circles" :gap="10">
-          <span slot="legend-value">/200</span>
-          <span slot="legend-caption">Some Caption</span>
+        <vue-ellipse-progress
+          :size="600"
+          :progress="progress"
+          :legendValue="1315.56"
+          animation="rs 5000 500"
+          :legend-value-formatter="customFormatter"
+        >
+          <!--<template v-slot:default="{ counterProps }">
+            <span style="font-weight: bold; font-size: 1.6rem; color: green;">
+              {{ formattedPrice(counterProps.currentValue) }}
+            </span>
+          </template>-->
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress
-        :loading="loading"
-        :no-data="noData"
-        :progress="progress"
-        :angle="-90"
-        :legend="false"
-        :thickness="100"
-        dash="strict 60 0.95"
-        :empty-thickness="100"
-        line="butt"
-        half
-        animation="rs 1000"
-        :dot="{ size: 100, backgroundColor: 'rgba(100,256,4,1)', width: '2px' }"
-        line-mode="in-over"
-      />
     </div>
   </div>
 </template>
@@ -72,6 +66,7 @@ export default {
   components: { VueEllipseProgress },
   data: () => ({
     line: "round",
+    price: "",
     circles: [
       { progress: 50, color: "red" },
       { progress: 50, color: "red", half: true, angle: -90 },
@@ -139,6 +134,18 @@ export default {
     },
   },
   methods: {
+    formattedPrice(value) {
+      return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(value);
+    },
+    customFormatter({ currentValue /* start, end, startTime, previousCountStepValue, elapsed, currentRawValue */ }) {
+      this.price = new Intl.NumberFormat("fr-FR").format(currentValue);
+      // console.log(this.price, currentValue, currentRawValue, previousCountStepValue, start, end, startTime, elapsed);
+      return `My ${this.price} Format`;
+      /* return `
+        <span style="font-weight: bold; font-size: 1.6rem">${this.price.slice(0, this.price.indexOf(","))}</span>
+        <span>${this.price.slice(this.price.indexOf(","), this.price.length)}</span>
+      `; */
+    },
     updateProgress() {
       this.progress = parseFloat(Math.floor(Math.random() * 100).toFixed(2));
     },
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 1482164..a776af8 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,5 +1,12 @@
 <template>
-  <span>{{ formattedValue }}</span>
+  <span class="ep-legend--value__counter">
+    <slot> </slot>
+    <span v-if="legendValueFormatter">
+      <span v-if="isHTML" v-html="customFormattedValue"></span>
+      <span v-else>{{ customFormattedValue }}</span>
+    </span>
+    <span v-else-if="!$slots.default">{{ formattedValue }}</span>
+  </span>
 </template>
 
 <script>
@@ -12,6 +19,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    legendValueFormatter: {
+      type: Function,
+      required: false,
+    },
     animation: {
       type: String,
       required: true,
@@ -25,6 +36,7 @@ export default {
     start: 0,
     startTime: 0,
     currentValue: 0,
+    customFormattedValue: "",
     raf: null,
     previousCountStepValue: 0,
   }),
@@ -57,6 +69,23 @@ export default {
     duration() {
       return animationParser(this.animation).duration;
     },
+    isHTML() {
+      return /<[a-z/][\s\S]*>/i.test(this.customFormattedValue.toString().trim());
+    },
+    counterProps() {
+      return {
+        currentValue: parseFloat(this.formattedValue),
+        currentRawValue: this.currentValue,
+        duration: this.duration,
+        previousCountStepValue: this.previousCountStepValue,
+        start: this.start,
+        end: this.end,
+        difference: this.difference,
+        oneStepDifference: this.oneStepDifference,
+        startTime: this.startTime,
+        elapsed: undefined,
+      };
+    },
   },
   methods: {
     countDecimals() {
@@ -81,6 +110,10 @@ export default {
         this.currentValue = this.end;
         this.reset();
       }
+      this.$emit("counterPropsUpdate", { ...this.counterProps, elapsed });
+      if (this.legendValueFormatter) {
+        this.runCustomFormatter(elapsed);
+      }
     },
     countDown(elapsed) {
       const decreaseValue = Math.min(this.oneStepDifference * (elapsed || 1), this.difference);
@@ -97,8 +130,17 @@ export default {
       this.previousCountStepValue = 0;
       cancelAnimationFrame(this.raf);
     },
+    runCustomFormatter(elapsed) {
+      this.customFormattedValue =
+        this.legendValueFormatter({
+          ...this.counterProps,
+          elapsed,
+        }) || "";
+    },
   },
   mounted() {
+    if (this.legendValueFormatter) this.runCustomFormatter(0);
+    if (this.$slots.default) this.$emit("counterPropsUpdate", this.counterProps);
     if (!this.loading) {
       setTimeout(() => {
         this.raf = requestAnimationFrame(this.count);
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 3154516..805d9cf 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -27,7 +27,17 @@
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize: fontSize, color: fontColor }"
         >
-          <counter :value="legendVal" :animation="animation" :loading="loading"> </counter>
+          <counter
+            :value="legendVal"
+            :animation="animation"
+            :loading="loading"
+            :legend-value-formatter="legendValueFormatter"
+            @counterPropsUpdate="updateCounterProps"
+          >
+            <template>
+              <slot :counterProps="counterProps"></slot>
+            </template>
+          </counter>
           <slot name="legend-value"></slot>
         </div>
         <slot name="legend-caption"></slot>
@@ -46,6 +56,14 @@ export default {
   name: "VueEllipseProgress",
   components: { Counter, CircleContainer },
   props,
+  data: () => ({
+    counterProps: {},
+  }),
+  methods: {
+    updateCounterProps(counterProps) {
+      this.counterProps = counterProps;
+    },
+  },
   computed: {
     legendVal() {
       if (this.loading || this.noData) {
diff --git a/src/components/interface.js b/src/components/interface.js
index c505950..84a61f1 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -157,8 +157,13 @@ const props = {
   },
   reverse: {
     type: Boolean,
+    required: false,
     default: false,
   },
+  legendValueFormatter: {
+    type: Function,
+    required: false,
+  },
 };
 
 const simplifiedProps = {};