Circular gauge initial docs

_contentTemplates/gauges/additional-customization.md

@@ -15,10 +15,15 @@ To further customize the elements of the Radial Gauge you can use nested tags. W
 #end
 
 #arc-gauge-additional-customization
-To further customize the elements of the Arc Gauge you can use nested tags. When configuring nested properties and child elements in your Radial Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<RadialGauge*Category**Specifics*>` where the **Category** can be one of the following:
+To further customize the elements of the Arc Gauge you can use nested tags. When configuring nested properties and child elements in your Arc Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<ArcGauge*Category**Specifics*>` where the **Category** can be one of the following:
 
 * Scale
 * GaugeArea
 #end
 
+#circular-gauge-additional-customization
+To further customize the elements of the Circular Gauge you can use nested tags. When configuring nested properties and child elements in your Circular Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `<CircularGauge*Category**Specifics*>` where the **Category** can be one of the following:
 
+* Scale
+* GaugeArea
+#end

components/gauge-circular/labels.md

@@ -0,0 +1,191 @@
+---
+title: Labels
+page_title: Labels
+description: Circular Gauge for Blazor - Labels.
+slug: circular-gauge-labels
+tags: telerik,blazor,circular,gauge,labels
+published: True
+position: 15
+---
+
+# Circular Gauge Labels
+
+You can customize the appearance of the labels rendered on the [scale]({%slug circular-gauge-scale%}) of the Circular Gauge by using the `<CircularGaugeScaleLabels>`, child tag of the `<CircularGaugeScale>`, and the parameters it exposes:
+
+* [Format](#format)
+
+* [Center Template](#center-template)
+
+* [Color](#color)
+
+* [Visible](#visible)
+
+* [Additional Customization](#additional-customization)
+
+## Format
+
+The `Format` (`string`) parameter allows you to customize the rendering of the labels by using the <a href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings" target="_blank">standard numeric format strings</a>. You can set the values of the labels to showcase, for example, currency, percentage, and so on.
+
+>caption Use the Format parameter to showcase currency. The result from the code snippet below.
+
+![Format parameter example](images/format-parameter-labels.png)
+
+````CSHTML
+@* Use the {0:C0} format string to format the values of the labels as currency. *@
+
+
+<TelerikCircularGauge>
+    <CircularGaugeScales>
+
+        <CircularGaugeScale>           
+            <CircularGaugeScaleLabels Format="{0:C0}" Visible="true"></CircularGaugeScaleLabels>
+        </CircularGaugeScale>
+
+    </CircularGaugeScales>
+
+    <CircularGaugePointers>
+
+        <CircularGaugePointer Value="50">
+        </CircularGaugePointer>
+
+    </CircularGaugePointers>
+</TelerikCircularGauge>
+````
+
+## Center Template
+
+The center template allows you to take control of the rendering of the central section of the Circular Gauge. To use it, add the `<CircularGaugeCenterLabel>` a child of the `<TelerikCircularGauge>` It provides a `context` object (`GaugeCenterLabelTemplateContext`) which exposes a list with the pointers in the component and their values.
+
+>caption Use the Center Template to display the Value of the pointer. The result from the code snippet below.
+
+![center template](images/center-template-circular.png)
+
+````CSHTML
+@* Print the value of the pointer in the center of the component *@
+
+<TelerikCircularGauge>
+    <CircularGaugeCenterLabel>
+        <Template>
+            @{
+                GaugeCenterLabelTemplateContext item = context;
+
+                var pointer = context.Pointers.FirstOrDefault();
+
+                <div style="font-weight: bold">@pointer.Value</div>
+            }
+        </Template>
+    </CircularGaugeCenterLabel>
+
+    <CircularGaugePointers>
+
+        <CircularGaugePointer Value="30" Color="blue">
+        </CircularGaugePointer>
+
+    </CircularGaugePointers>
+
+    <CircularGaugeScales>
+
+        <CircularGaugeScale Min="0" Max="100">
+            <CircularGaugeScaleLabels Visible="true" />
+        </CircularGaugeScale>
+
+    </CircularGaugeScales>
+</TelerikCircularGauge>
+````
+
+## Color
+
+The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
+
+>caption Change the color of the labels. The result from the code snippet below.
+
+![Color parameter screenshot](images/color-parameter-labels.png)
+
+````CSHTML
+@* Change the color of the labels to blue *@
+
+<TelerikCircularGauge>
+    <CircularGaugeScales>
+
+        <CircularGaugeScale>           
+            <CircularGaugeScaleLabels Color="blue" Visible="true"></CircularGaugeScaleLabels>
+        </CircularGaugeScale>
+
+    </CircularGaugeScales>
+
+    <CircularGaugePointers>
+
+        <CircularGaugePointer Value="60">
+        </CircularGaugePointer>
+
+    </CircularGaugePointers>
+</TelerikCircularGauge>
+````
+
+## Visible
+
+The `Visible` (`bool`) parameter controls wether the labels will be rendered. Its default value is `false`. If you want to display the labels include the `<CircularGaugeScaleLabels>` tag in the `<CircularGaugeScale>` and set its `Visible` parameter to `true`.
+
+>caption Show the labels by using the Visible parameter. The result from the code snippet below
+
+![Hide the labels](images/visible-parameter-labels.png)
+
+````CSHTML
+@* Set the Visible parameter to true to show the labels *@
+
+<TelerikCircularGauge>
+    <CircularGaugeScales>
+
+        <CircularGaugeScale>           
+            <CircularGaugeScaleLabels Visible="true"></CircularGaugeScaleLabels>
+        </CircularGaugeScale>
+
+    </CircularGaugeScales>
+
+    <CircularGaugePointers>
+
+        <CircularGaugePointer Value="40">
+        </CircularGaugePointer>
+
+    </CircularGaugePointers>
+</TelerikCircularGauge>
+````
+
+## Additional Customization
+
+@[template](/_contentTemplates/gauges/additional-customization.md#circular-gauge-additional-customization)
+
+>caption Customize the background and the margin of the Labels. The result from the code snippet below.
+
+![Custom Labels](images/labels-customize.png)
+
+````CSHTML
+@* Customize the position, border and padding of the labels. *@
+
+<TelerikCircularGauge>
+    <CircularGaugeScales>
+
+        <CircularGaugeScale>
+            <CircularGaugeScaleLabels Position="CircularGaugeScaleLabelsPosition.Outside" Visible="true">
+                <CircularGaugeScaleLabelsBorder Width="1" Color="rgb(255,99,88)" DashType="DashType.Solid"></CircularGaugeScaleLabelsBorder>
+                <CircularGaugeScaleLabelsPadding Top="3" Bottom="3" Left="3" Right="3"></CircularGaugeScaleLabelsPadding>
+            </CircularGaugeScaleLabels>
+        </CircularGaugeScale>
+
+    </CircularGaugeScales>
+
+    <CircularGaugePointers>
+
+        <CircularGaugePointer Value="40">
+        </CircularGaugePointer>
+
+    </CircularGaugePointers>
+</TelerikCircularGauge>
+````
+
+## See Also
+
+* [Circular Gauge: Live Demo](https://demos.telerik.com/blazor-ui/circular-gauge)
+* [Circular Gauge: Overview]({%slug circular-gauge-overview%})
+* [Circular Gauge: Scale]({%slug circular-gauge-scale%})
+* [Circular Gauge: Pointers]({%slug circular-gauge-pointers%})