diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md index 36af7caeaf..5fbd13c995 100644 --- a/_contentTemplates/gauges/additional-customization.md +++ b/_contentTemplates/gauges/additional-customization.md @@ -6,5 +6,12 @@ To further customize the elements of the linear gauge you can use nested tags. W * Pointers #end +#radial-gauge-additional-customization +To further customize the elements of the Radial 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 `` where the **Category** can be one of the following: + +* Scale +* GaugeArea +* Pointers +#end diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md index 4c9bac8d5e..942cdb9271 100644 --- a/components/gauge-linear/overview.md +++ b/components/gauge-linear/overview.md @@ -12,7 +12,7 @@ position: 0 The Telerik Linear Gauge for Blazor represents [numerical values]({%slug linear-gauge-pointers%}) on a [scale]({%slug linear-gauge-scale%}) of ranges in a linear format. -This article is separated in the following sections: +#### This article is separated in the following sections: * [Basics](#basics) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md index 1bc1d8dff8..2d581a5038 100644 --- a/components/gauge-linear/scale.md +++ b/components/gauge-linear/scale.md @@ -10,7 +10,7 @@ position: 5 ## Linear Gauge Scale -The scale of the linear gauge renders the values, pointers and labels. You can customize it by adding an instance of the `` to the `` collection, child tag of the ``. The `` exposes the following parameters: +The scale of the linear gauge renders the values, pointers and labels. You can customize it by adding an instance of the `` to the `` collection, child tag of the ``. The `` exposes the following parameters: * [Min and Max](#min-and-max) diff --git a/components/gauge-radial/images/basic-radial-gauge.png b/components/gauge-radial/images/basic-radial-gauge.png new file mode 100644 index 0000000000..7dc6992c87 Binary files /dev/null and b/components/gauge-radial/images/basic-radial-gauge.png differ diff --git a/components/gauge-radial/images/color-parameter-labels.png b/components/gauge-radial/images/color-parameter-labels.png new file mode 100644 index 0000000000..ae97217e31 Binary files /dev/null and b/components/gauge-radial/images/color-parameter-labels.png differ diff --git a/components/gauge-radial/images/default-ranges-color.png b/components/gauge-radial/images/default-ranges-color.png new file mode 100644 index 0000000000..4d3479332c Binary files /dev/null and b/components/gauge-radial/images/default-ranges-color.png differ diff --git a/components/gauge-radial/images/format-parameter-labels.png b/components/gauge-radial/images/format-parameter-labels.png new file mode 100644 index 0000000000..7f9a6de2c9 Binary files /dev/null and b/components/gauge-radial/images/format-parameter-labels.png differ diff --git a/components/gauge-radial/images/from-to-range.png b/components/gauge-radial/images/from-to-range.png new file mode 100644 index 0000000000..573dc64e86 Binary files /dev/null and b/components/gauge-radial/images/from-to-range.png differ diff --git a/components/gauge-radial/images/labels-custom-background.png b/components/gauge-radial/images/labels-custom-background.png new file mode 100644 index 0000000000..af934a674f Binary files /dev/null and b/components/gauge-radial/images/labels-custom-background.png differ diff --git a/components/gauge-radial/images/min-and-max-radial-gauge.png b/components/gauge-radial/images/min-and-max-radial-gauge.png new file mode 100644 index 0000000000..ec6e994343 Binary files /dev/null and b/components/gauge-radial/images/min-and-max-radial-gauge.png differ diff --git a/components/gauge-radial/images/minor-and-major-units-radial-gauge.png b/components/gauge-radial/images/minor-and-major-units-radial-gauge.png new file mode 100644 index 0000000000..1a6fef102c Binary files /dev/null and b/components/gauge-radial/images/minor-and-major-units-radial-gauge.png differ diff --git a/components/gauge-radial/images/pointer-cap-color.png b/components/gauge-radial/images/pointer-cap-color.png new file mode 100644 index 0000000000..8a56033992 Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-color.png differ diff --git a/components/gauge-radial/images/pointer-cap-size-and-color.png b/components/gauge-radial/images/pointer-cap-size-and-color.png new file mode 100644 index 0000000000..89548b18b2 Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-size-and-color.png differ diff --git a/components/gauge-radial/images/pointer-cap-size.png b/components/gauge-radial/images/pointer-cap-size.png new file mode 100644 index 0000000000..2b0dc1bcbc Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-size.png differ diff --git a/components/gauge-radial/images/pointer-color.png b/components/gauge-radial/images/pointer-color.png new file mode 100644 index 0000000000..97ab928cc3 Binary files /dev/null and b/components/gauge-radial/images/pointer-color.png differ diff --git a/components/gauge-radial/images/pointer-length.png b/components/gauge-radial/images/pointer-length.png new file mode 100644 index 0000000000..7ee69e173b Binary files /dev/null and b/components/gauge-radial/images/pointer-length.png differ diff --git a/components/gauge-radial/images/range-distance.png b/components/gauge-radial/images/range-distance.png new file mode 100644 index 0000000000..9402cd295d Binary files /dev/null and b/components/gauge-radial/images/range-distance.png differ diff --git a/components/gauge-radial/images/range-size.png b/components/gauge-radial/images/range-size.png new file mode 100644 index 0000000000..d619cc92d0 Binary files /dev/null and b/components/gauge-radial/images/range-size.png differ diff --git a/components/gauge-radial/images/ranges-color.png b/components/gauge-radial/images/ranges-color.png new file mode 100644 index 0000000000..30d4c41933 Binary files /dev/null and b/components/gauge-radial/images/ranges-color.png differ diff --git a/components/gauge-radial/images/ranges-opacity.png b/components/gauge-radial/images/ranges-opacity.png new file mode 100644 index 0000000000..85bfc11e77 Binary files /dev/null and b/components/gauge-radial/images/ranges-opacity.png differ diff --git a/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png b/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png new file mode 100644 index 0000000000..edc643ec02 Binary files /dev/null and b/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png differ diff --git a/components/gauge-radial/images/reverse-radial-gauge.png b/components/gauge-radial/images/reverse-radial-gauge.png new file mode 100644 index 0000000000..85fce826a5 Binary files /dev/null and b/components/gauge-radial/images/reverse-radial-gauge.png differ diff --git a/components/gauge-radial/images/start-end-angles.png b/components/gauge-radial/images/start-end-angles.png new file mode 100644 index 0000000000..d0e3341a6e Binary files /dev/null and b/components/gauge-radial/images/start-end-angles.png differ diff --git a/components/gauge-radial/images/visible-parameter-labels.png b/components/gauge-radial/images/visible-parameter-labels.png new file mode 100644 index 0000000000..75a3d1aebf Binary files /dev/null and b/components/gauge-radial/images/visible-parameter-labels.png differ diff --git a/components/gauge-radial/labels.md b/components/gauge-radial/labels.md new file mode 100644 index 0000000000..1c3f6bf608 --- /dev/null +++ b/components/gauge-radial/labels.md @@ -0,0 +1,145 @@ +--- +title: Labels +page_title: Labels +description: Radial Gauge for Blazor - Labels. +slug: radial-gauge-labels +tags: telerik,blazor,radial,gauge,labels +published: True +position: 20 +--- + +# Radial Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug radial-gauge-scale%}) of the Radial Gauge by using the ``, child tag of the ``, and the parameters it exposes: + +* [Format](#format) + +* [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 standard numeric format strings. 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. *@ + + + + + + + + + + + + + + + + + + +```` + +## 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 *@ + + + + + + + + + + + + + + + + +```` + +## Visible + +The `Visible` (`bool`) parameter controls wether the labels will be rendered. + +>caption Hide 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 false to hide the labels *@ + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#radial-gauge-additional-customization) + +>caption Customize the background and the margin of the Labels. The result from the code snippet below. + +![Custom Label background](images/labels-custom-background.png) + +````CSHTML +@* Provide background color and margin to the labels *@ + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) \ No newline at end of file diff --git a/components/gauge-radial/overview.md b/components/gauge-radial/overview.md index 73fdf3ae66..fbd5507181 100644 --- a/components/gauge-radial/overview.md +++ b/components/gauge-radial/overview.md @@ -1,147 +1,113 @@ --- title: Overview -page_title: Chart Overview -description: Overview of the Chart for Blazor. +page_title: Radial Gauge Overview +description: Overview of the Radial Gauge for Blazor. slug: radial-gauge-overview -tags: telerik,blazor,chart,overview +tags: telerik,blazor,radial,gauge,overview published: True position: 0 --- -# Chart Overview +# Radial Gauge Overview -The Blazor Chart component allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates. +The Telerik Radial Gauge for Blazor represents numerical values on a [scale]({%slug radial-gauge-scale%}) of ranges in a radial format. -#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. +#### This article is separated in the following sections: ->caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings +* [Basics](#basics) -````CSHTML -Basic chart and common settings/elements - - - - - - - - - +* [Features](#features) - - - +* [Methods](#methods) - - - +## Basics - +>caption To add a Telerik Radial Gauge for Blazor to your application: - - - +1. Add the `` tag. -@code { - public class MyDataModel - { - public int SecondSeriesValue { get; set; } - public string ExtraData { get; set; } +1. Add one or more instances of the `` to the `` collection. - } +1. Provide a `Value` for each ``. - public List modelData = new List() - { - new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, - new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, - new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, - new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, - }; +>caption Basic Telerik Radial Gauge for Blazor. - public List simpleData = new List() { 10, 2, 7, 5 }; +![Basic Radial Gauge](images/basic-radial-gauge.png) - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; -} +````CSHTML +@* Setup a basic radial gauge *@ + + + + + + + ```` ->caption The result from the code snippet above - -![](images/overview-chart.png) - +## Features +The Telerik Radial Gauge for Blazor exposes the following features: -@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) +#### Radial Gauge Size ->caption Component namespace and reference +* `Width` - `string` - controls the width of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. -````CSHTML -@using Telerik.Blazor.Components +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. - - +You can also set the Gauge size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the gauge's `Refresh()` C# [method](#methods) after the DOM has been redrawn and the new container dimensions are rendered. -@code { - Telerik.Blazor.Components.TelerikChart myChartRef; -} -```` +#### Other Features -## Chart Size +* `Class` - renders a custom CSS class on the topmost wrapping element of the component. You can use that class to reposition the component on the page. -To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. +* [Scale]({%slug radial-gauge-scale%}) - The scale of the radial gauge renders the values of the [pointers]({%slug radial-gauge-pointers%}), different [ranges]({%slug radial-gauge-ranges%}) and [labels]({%slug radial-gauge-labels%}). -You can also set the chart size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample. +* [Ranges]({%slug radial-gauge-ranges%}) - The ranges are used to visually distinguish particular values on the scale. +* [Labels]({%slug radial-gauge-labels%}) - The labels are rendered on the scale of the component to give information to the users. ->caption Change the 100% chart size dynamically to have a responsive chart +* [Pointers]({%slug radial-gauge-pointers%}) - The pointers indicate the values on the scale of the component. -````CSHTML -You can make a responsive chart +## Methods -Resize the container and redraw the chart +The Radial Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. -
+>caption Get a component reference and use the Refresh method - +````CSHTML +@* Change the Height of the component *@ - - - - - - - - +Change the height - + + + + + + -
+@code{ + Telerik.Blazor.Components.TelerikRadialGauge RadialGaugeRef { get; set; } -@code { - string ContainerWidth { get; set; } = "400px"; - string ContainerHeight { get; set; } = "300px"; - Telerik.Blazor.Components.TelerikChart theChart { get; set; } + public string Height { get; set; } = "200px"; - async Task ResizeChart() + async Task ChangeHeight() { - //resize the container - ContainerHeight = "500px"; - ContainerWidth = "800px"; + Height = "400px"; - //give time to the framework and browser to resize the actual DOM so the chart can use the expected size - await Task.Delay(20); + //give time to the framework and browser to resize the actual DOM so the gauge can use the expected size + await Task.Delay(30); - //redraw the chart - theChart.Refresh(); + RadialGaugeRef.Refresh(); } - - public List someData = new List() { 10, 2, 7, 5 }; - - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ## See Also - * [Data Binding]({%slug components/chart/databind%}) - * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) - * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart) +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) \ No newline at end of file diff --git a/components/gauge-radial/pointers.md b/components/gauge-radial/pointers.md new file mode 100644 index 0000000000..b64d349c14 --- /dev/null +++ b/components/gauge-radial/pointers.md @@ -0,0 +1,165 @@ +--- +title: Pointers +page_title: Radial Gauge - Pointers +description: Radial Gauge for Blazor - Pointers. +slug: radial-gauge-pointers +tags: telerik,blazor,radial,gauge,pointers +published: True +position: 10 +--- + +# Radial Gauge Pointers + +The Pointers mark the values on the scale. They consist of pointer arrow (called just "pointer" for brevity) and a pointer cap - the circle that marks the pointer center. You can customize pointers and pointer caps through the parameters they expose: + +* Pointer + + * [Pointer Color](#pointer-color) + + * [Pointer Length](#pointer-length) + +* Pointer Cap + + * [Pointer Cap Color](#pointer-cap-color) + + * [Pointer Cap Size](#pointer-cap-size) + +* [Notes](#notes) + + +## Pointer Color + +The `Color` (`string`) parameter controls the color of the pointers. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer. The result from the code snippet below. + +![Pointers color](images/pointer-color.png) + +````CSHTML +@* Change the color of the pointers in the Radial Gauge *@ + + + + + + + + + + + + + + +```` + +## Pointer Length + +The `Length` (`string`) parameter controls the pointers length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5. + +>caption Change the length of the pointers. The result from the code snippet below + +![Pointer Length](images/pointer-length.png) + +````CSHTML +@* Change the length of the pointers *@ + + + + + + + + + + + + + + +```` + +## Pointer Cap Color + +The `Color` (`string`) parameter controls the color of the pointer cap. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer cap. The result from the code snippet below. + +![Pointer cap color](images/pointer-cap-color.png) + +````CSHML +@* Change the color of the pointer cap *@ + + + + + + + + + +```` + +## Pointer Cap Size + +The `Size` (`double`) parameter controls the size of the pointer cap in percentage according to the scale radius. (from 0 to 1). The default size is 0.05. + +>caption Change the size of the pointer cap. The result from the code snippet below. + +![Pointer cap size](images/pointer-cap-size.png) + +````CSHTML +@* Change the sizes of the pointers *@ + + + + + + + + + +```` + + +## Notes + + +### Pointer Order + +The pointer caps are rendered as per the order they are declared in the markup - the last pointer will be rendered on top of the others regardless of its value. Therefore, you should consider that when operating with the pointer cap parameters in order for their values to be visible (for example if the first pointer cap has the same size as the last pointer cap, it will not be visible.) + +>caption Change the sizes and colors of the pointer caps. The result from the code snippet below. + +![Pointer cap size](images/pointer-cap-size-and-color.png) + +````CSHTML +@* Change the sizes and colors of the pointer caps *@ + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) diff --git a/components/gauge-radial/ranges.md b/components/gauge-radial/ranges.md new file mode 100644 index 0000000000..3e38d894d6 --- /dev/null +++ b/components/gauge-radial/ranges.md @@ -0,0 +1,227 @@ +--- +title: Ranges +page_title: Ranges +description: Radial Gauge for Blazor - Ranges. +slug: radial-gauge-ranges +tags: telerik,blazor,radial,gauge,ranges +published: True +position: 15 +--- + +# Radial Gauge Ranges + +You can highlight specific value ranges by providing one or more instances of the `` to the `` collection, child tag of the ``. You can customize them by using the parameters exposed on the ``: + +* [From and To](#from-and-to) + +* [Range Size](#range-size) + +* [Range Distance](#range-distance) + +* [Range Placeholder Color](#range-placeholder-color) + +* [Color](#color) + +* [Opacity](#opacity) + +## From and To + +* The `From` (`double`) parameter controls the start position of the range in scale units. + +* The `To` (`double`) parameter controls the end position of the range in scale units. + +>caption Use the From and To parameters to provide a range. The result from the code snippet below. + +![From and To parameters example](images/from-to-range.png) + +````CSHTML +@* Use the From and To parameters to provide a range on the scale. *@ + + + + + + + + + + + + + + + + + +```` + +## Range Size + +The `RangeSize` (`double`) parameter controls the width of the range indicators. + +>caption Use the RangeSize parameter to provide size for the range indicators. The result from the code snippet below. + +![Range Size](images/range-size.png) + +````CSHTML +@* Provide the desired size of the range. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Range Distance + +The `RangeDistance` (`double`) parameter controls the distance from the range indicators to the ticks. + +>caption Use the RangeDistance parameter to provide the desired distance from the range indicators to the ticks. The result from the code snippet below. + +![Range Distance](images/range-distance.png) + +````CSHTML +@* Provide the desired distance from the range indicators to the ticks. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Range Placeholder Color + +The `RangePlaceholderColor` (`string`) parameter controls the default color for the ranges. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Set the default color for the ranges in the radial gauge. The result from the code snippet below. + +![Default Ranges Color](images/default-ranges-color.png) + +````CSHTML +@* Change the default color of the ranges *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the range. It accepts **CSS**, **HEX** and **RGB** colors. If you do not define the `Color` parameter the range will not be visually rendered. + +>caption Set the desired colors for the ranges in the radial gauge. The result from the code snippet below. + +![Ranges Color](images/ranges-color.png) + +````CSHTML +@* Change the color of the ranges *@ + + + + + + + + + @* Range with no defined color that is not visually rendered *@ + + + + + + + + + + + + + +```` + +## Opacity + +The `Opacity` (`double`) parameter controls the opacity of the range. The value passed to it should be between **0** and **1**. Defaults to 1. + +>caption Change the opacity of a range. The result from the code snippet below + +![Ranges opacity](images/ranges-opacity.png) + +````CSHTML +@* Make a range more opaque *@ + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) + diff --git a/components/gauge-radial/scale.md b/components/gauge-radial/scale.md new file mode 100644 index 0000000000..f87b6053e9 --- /dev/null +++ b/components/gauge-radial/scale.md @@ -0,0 +1,189 @@ +--- +title: Scale +page_title: Scale +description: Radial Gauge for Blazor - Scale. +slug: radial-gauge-scale +tags: telerik,blazor,radial,gauge,scale +published: True +position: 5 +--- + +## Radial Gauge Scale + +The Scale of the Radial Gauge renders the values, pointers and labels. You can customize it by adding an instance of the `` to the `` collection, child tag of the ``. The `` exposes the following parameters: + +* [Min and Max](#min-and-max) + +* [MinorUnit and MajorUnit](#minorunit-and-majorunit) + +* [MinorTicks and MajorTicks](#ninorticks-and-majorticks) + +* [StartAngle and EndAngle](#startangle-and-endangle) + +* [Reverse](#reverse) + +* [Additional Customization](#additional-customization) + + * [Example: Remove the MinorUnit ticks](#example-remove-the-minorunit-ticks) + + +## Min and Max + +* The `Max` (`double`) parameter controls the maximum value that the component can reach. + +* The `Min` (`double`) parameter controls the minimum value of the component. + +>caption Change the minimum and the maximum values for the scale. The result from the code snippet below. + +![Min and max parameters example](images/min-and-max-radial-gauge.png) + +````CSHTML +@* Use the Min and Max parameters to change the minimum and the maximum values for the scale *@ + + + + + + + + + + + + + + + + + + + + +```` + +## MinorUnit and MajorUnit + +* The `MajorUnit` (`double`) parameter controls the interval between the major unit divisions of the component. The [labels]({%slug radial-gauge-labels%}) will be rendered next to the `MajorUnit` ticks. + +* The `MinorUnit` (`double`) parameter controls the interval between the minor unit divisions of the component. + +>caption Change the rendering frequency of the minor and major unit divisions. The result from the code snippet below. + +![Minor and major units parameters](images/minor-and-major-units-radial-gauge.png) + +````CSHTML +@* Update the rendering of the major and minor units *@ + + + + + + + + + + + + + + +```` + +## StartAngle and EndAngle + +The gauge is rendered clockwise (0 degrees are the 180 degrees in the polar coordinate system). + +* `StartAngle` defines the start angle of the gauge, its default value is 0. + +* `EndAngle` - defines the end angle of the gauge, its default value is 180. + +>caption Change the StartAngle and EndAngle of the radial gauge. The result from the code snippet below + +![StartAngle and EndAngle of the gauge](images/start-end-angles.png) + +````CSHTML +@* Change the StartAngle and EndAngle of the radial gauge *@ + + + + + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the gauge will be rendered in a reversed view - the min value will be on the right side and the max value will be on the left. + +>caption Reverse the component. The result from the code snippet below. + +![reverse parameter example](images/reverse-radial-gauge.png) + +````CSHTML +@* Set the Reverse parameter to true *@ + + + + + + + + + + + + + +```` + + + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#radial-gauge-additional-customization) + +### Example: Remove the MinorUnit ticks + +You can remove the MinorUnit ticks from the rendering of the scale by using the `` nested tag and its `Visible` parameter. + +>caption Remove the MinorUnit ticks. The result from the code snippet below. + +![Remove the MinorUnit ticks](images/remove-minorunit-ticks-radial-gauge.png) + +````CSHMTL +@* Remove the MinorUnit ticks. *@ + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) +