From 633b10c51b925b8c724734d53b268654f4800bbc Mon Sep 17 00:00:00 2001 From: Graham High <94383143+grahamkhigh@users.noreply.github.com> Date: Mon, 20 May 2024 13:07:11 -0400 Subject: [PATCH] Update gauge-ranges.md corrected grammar issues --- ej2-vue/circular-gauge/gauge-ranges.md | 42 +++++++++++++------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/ej2-vue/circular-gauge/gauge-ranges.md b/ej2-vue/circular-gauge/gauge-ranges.md index 1e30a79cd..abebdbf3c 100644 --- a/ej2-vue/circular-gauge/gauge-ranges.md +++ b/ej2-vue/circular-gauge/gauge-ranges.md @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Gauge ranges in Vue Circular gauge component +# Gauge Ranges in Vue Circular Gauge Component -You can categories certain interval on gauge axis using [`ranges`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#properties) property. +You can categorize specific intervals on the gauge axis by using the [`ranges`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#properties) property. ## Start and End @@ -26,7 +26,7 @@ Start and end value of a range in an axis can be customized by using [`start`](h ## Customization -Color and thickness of the range can be customized by using [`color`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#color-string),[`startWidth`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#startwidth-number) and [`endWidth`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#endwidth-number) property. +The color and thickness of the range can be customized by using the [`color`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#color-string), [`startWidth`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#startwidth-number), and [`endWidth`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#endwidth-number) properties. {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -51,13 +51,13 @@ The corners of the ranges can be rounded by specifying desired values to the `ro ## Radius -You can place the range inside or outside of the axis by using [`radius`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#radius-string) -property. The radius of the range can takes value either in percentage or in pixels. By default, ranges +You can place the range inside or outside of the axis by using the [`radius`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/range/#radius-string) +property. The radius of the range accepts values in percentages or in pixels. By default, ranges take 100% of the axis radius. -### In Pixel +### In Pixels -You can set the radius of the range in pixel as demonstrated below, +You can set the radius of the range in pixels as demonstrated below: {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -68,10 +68,10 @@ You can set the radius of the range in pixel as demonstrated below, {% previewsample "page.domainurl/code-snippet/circular-gauge/getting-started-cs54" %} -### In Percentage +### In Percentages -By setting value in percentage, range gets its dimension with respect to its axis radius. -For example, when the radius is ‘50%’, range renders to half of the axis radius. +By setting the value as a percentage, the range gets its dimension with respect to its axis radius. +For example, when the radius is ‘50%’, the range renders to half of the axis radius. {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -83,7 +83,7 @@ For example, when the radius is ‘50%’, range renders to half of the axis rad ## Dragging Range -The ranges can be dragged on the axis line by clicking and dragging the same. To enable or disable the range drag, use the [`enableRangeDrag`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/circularGaugeModel/#enablerangedrag) property. +Ranges can be dragged on the axis line by clicking and dragging them. To enable or disable range dragging, use the [`enableRangeDrag`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/circularGaugeModel/#enablerangedrag) property. {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -95,10 +95,10 @@ The ranges can be dragged on the axis line by clicking and dragging the same. To ## Multiple Ranges -You can add multiple ranges to an axis with the above customization as demonstrated below. +You can add multiple ranges to an axis as demonstrated below: ->Note: You can set the range color to axis ticks and labels by enabling `useRangeColor` property in [`majorTicks`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/tick/), -[`minorTicks`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/tick/) and [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/label/) object. +>Note: You can set the range color to axis ticks and labels by enabling the `useRangeColor` property in the [`majorTicks`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/tick/), +[`minorTicks`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/tick/), and [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/label/) objects. {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -110,16 +110,16 @@ You can add multiple ranges to an axis with the above customization as demonstra ## Gradient Color -Gradient support allows to add multiple colors in the ranges and pointers of the circular gauge. The following gradient types are supported in the circular gauge. +Gradient support allows you to add multiple colors in the ranges and pointers of the Circular Gauge. The following gradient types are supported: * Linear Gradient * Radial Gradient ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`startValue`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#colorstop) property. +A linear gradient applies colors in a linear progression. The start value of the linear gradient is set using the [`startValue`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient is set using the [`endValue`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#endvalue) property. The color stop values, such as color, opacity, and offset, are set using the [`colorStop`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/linearGradient/#colorstop) property. -To apply linear gradient to the range, follow the below code sample. +To apply a linear gradient to the range, follow the code sample below: {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -131,9 +131,9 @@ To apply linear gradient to the range, follow the below code sample. ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#colorstop) property. +A radial gradient applies colors in a circular progression. The inner circle position of the radial gradient is set using the [`innerPosition`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient is set using the [`outerPosition`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#outerposition) property. The color stop values, such as color, opacity, and offset, are set using the [`colorStop`](https://ej2.syncfusion.com/vue/documentation/api/circular-gauge/radialGradient/#colorstop) property. -To apply radial gradient to the range, follow the below code sample. +To apply a radial gradient to the range, follow the code sample below: {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -143,6 +143,6 @@ To apply radial gradient to the range, follow the below code sample. {% previewsample "page.domainurl/code-snippet/circular-gauge/getting-started-cs59" %} -## See also +## See Also -* [Tooltip for Ranges](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction/tooltip-for-ranges-and-annotations/) \ No newline at end of file +* [Tooltip for Ranges](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction/tooltip-for-ranges-and-annotations/)