Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update gauge-ranges.md #356

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+21 −21
Open

Update gauge-ranges.md #356

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions ej2-vue/circular-gauge/gauge-ranges.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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" %}
Expand All @@ -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/)
* [Tooltip for Ranges](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction/tooltip-for-ranges-and-annotations/)