ejRangeNavigator
9 Oct 201724 minutes to read
The range navigator can be easily configured to the DOM element, such as div. You can create a range navigator with a highly customizable look and feel.
Name | Type | Description |
---|---|---|
|
object | settings for range navigator |
|
object | settings for range navigator |
Example
<ej-rangenavigator id="rangecontainer">
</ej-rangenavigator>
Requires
-
module:jQuery
-
module:jquery.globalize.min.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.chart.js
-
module:ej.rangenavigator.js
Members
allowSnapping boolean
Toggles the placement of slider exactly on the place it left or on the nearest interval.
Default Value
- false
Example
<ej-rangenavigator id="rangecontainer" [allowSnapping]="true">
</ej-rangenavigator>
border object
Options for customizing the color, opacity and width of the chart border.
border.color string
Border color of rangenavigator. When enable the scrollbar, the default color will be set as “#B4B4B4”.
Default Value
- “transparent”
Example
<ej-rangenavigator id="rangecontainer" border.color ="green">
</ej-rangenavigator>
border.opacity number
Opacity of the rangeNavigator border.
Default Value
- 1
Example
<ej-rangenavigator id="rangecontainer" [border.opacity] =0.5>
</ej-rangenavigator>
border.width number
Width of the RangeNavigator border.
Default Value
- 1
Example
<ej-rangenavigator id="rangecontainer" [border.width] =1>
</ej-rangenavigator>
dataSource object
Specifies the data source for range navigator.
Example
<ej-rangenavigator id="rangecontainer" [dataSource] ="data1">
</ej-rangenavigator>
series array
Specifies the properties used for customizing the range series.
series.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
this.series = {
xName:"XValue"
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
series.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
this.series = {
yName:"YValue"
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
series.dataSource object
Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.
Default Value
- null
Example
this.series = {
dataSource:"data"
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
series.type enum
Specifies the type of the series to render in chart.
Name | Type | Description |
---|---|---|
Area | string | Specifies the series type as area. |
Line | string | Specifies the series type as line. |
Spline | string | Specifies the series type as spline. |
StepArea | string | Specifies the series type as steparea. |
SplineArea | string | Specifies the series type as steparea. |
StepLine | string | Specifies the series type as stepline. |
Default Value
- “column”. see Type
Example
this.series = {
type:"line"
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
series.enableAnimation boolean
Enable/disable the animation of series.
Default Value
- false
Example
this.series = {
enableAnimation:true
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
series.fill string
Fill color of the series.
Default Value
- null
Example
<ej-chart id="chartcontainer">
<e-seriescollection>
<e-series fill ="green"></e-series>
</e-seriescollection>
</ej-chart>
enableDeferredUpdate boolean
Toggles the redrawing of chart on moving the sliders.
Default Value
- true
Example
<ej-rangenavigator id="rangecontainer" [enableDeferredUpdate] ="false">
</ej-rangenavigator>
enableScrollbar boolean
Enable the scrollbar option in the rangenavigator.
Default Value
- false
Example
<ej-rangenavigator id="rangecontainer" [enableRTL] ="true">
</ej-rangenavigator>
enableRTL boolean
Toggles the direction of rendering the range navigator control.
Default Value
- false
Example
<ej-rangenavigator id="rangecontainer" [enableRTL] ="false">
</ej-rangenavigator>
isResponsive boolean
Sets a value whether to make the range navigator responsive on resize.
Default Value
- false
Example
<ej-rangenavigator id="rangecontainer" [isResponsive] ="true">
</ej-rangenavigator>
labelSettings object
Options for customizing the labels colors, font, style, size, horizontalAlignment and opacity.
labelSettings.higherLevel object
Options for customizing the higher level labels in range navigator.
labelSettings.higherLevel.border object
Options for customizing the border of grid lines in higher level.
labelSettings.higherLevel.border.color string
Specifies the border color of grid lines.
Default Value
- “transparent”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
border:{
color:'#ff0000'
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.border.width string
Specifies the border width of grid lines.
Default Value
- “0.5”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
border:{
width:1
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.fill string
Specifies the fill color of higher level labels.
Default Value
- “transparent”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
fill:"days"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.gridLineStyle object
Options for customizing the grid line colors, width, dashArray, border.
labelSettings.higherLevel.gridLineStyle.color string
Specifies the color of grid lines in higher level.
Default Value
- “#B5B5B5”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
gridLineStyle :{
color:"#ff0000"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.gridLineStyle.dashArray string
Specifies the dashArray of grid lines in higher level.
Default Value
- “20 5 0”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
gridLineStyle :{
dashArray:"20 10 5"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.gridLineStyle.width string
Specifies the width of grid lines in higher level.
Default Value
- “#B5B5B5”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
gridLineStyle :{
width:1
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.intervalType enum
Specifies the intervalType for higher level labels. See IntervalType
Name | Type | Description |
---|---|---|
Years | string | The labels are displayed with year as intervals between them |
Quarters | string | The labels are displayed with quarter as intervals between them |
Months | string | The labels are displayed with months as intervals between them |
Weeks | string | The labels are displayed with weeks as intervals between them |
Days | string | The labels are displayed with days as intervals between them |
Hours | string | The labels are displayed with hours as intervals between them |
Minutes | string | The labels are displayed with minutes as intervals between them |
Default Value
- “auto”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
intervalType:"days"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.labelPlacement enum
Specifies the position of the labels to render either inside or outside of plot area
Name | Type | Description |
---|---|---|
Inside | string | The Labels are displayed inside the Range Navigator |
Outside | string | The Labels are displayed outside the Range Navigator |
Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement
Default Value
- “outside”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
labelPlacement:"inside"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.position enum
Specifies the position of the labels in higher level
Name | Type | Description |
---|---|---|
Top | string | Labels are placed on top of the slider |
Bottom | string | Labels are placed at the bottom of the slider |
Specifies the position of the labels in higher level.See Position
Default Value
- “top”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
position:"bottom"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style object
Options for customizing the style of higher level labels.
labelSettings.higherLevel.style.font object
Options for customizing the font properties.
labelSettings.higherLevel.style.font.color string
Specifies the label font color. Labels render with the specified font color.
Default Value
- “black”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
color:"red"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.font.fontFamily string
Specifies the label font family. Labels render with the specified font family.
Default Value
- “Segoe UI”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
fontFamily:"Algerian"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.font.fontStyle string
Specifies the label font style. Labels render with the specified font style.
Default Value
- “Normal”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
fontStyle:"Italic"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.font.fontWeight string
Specifies the label font weight. Labels render with the specified font weight.
Default Value
- “regular”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
fontWeight:"regular"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.font.opacity number
Specifies the label opacity. Labels render with the specified opacity.
Default Value
- 1
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
opacity:"0.5"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.font.size string
Specifies the label font size. Labels render with the specified font size.
Default Value
- “12px”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
font:{
size:"14px"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.style.horizontalAlignment string
Specifies the horizontal text alignment of the text in label.
Default Value
- “middle”
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
horizontalAlignment: "left"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.higherLevel.visible boolean
Toggles the visibility of higher level labels.
Default Value
- true
Example
this.labelSettings = {
// customizing higher level labels.
higherLevel: {
visible: false
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel object
Options for customizing the labels in lower level.
labelSettings.lowerLevel.border object
Options for customizing the border of grid lines in lower level.
labelSettings.lowerLevel.border.color string
Specifies the border color of grid lines.
Default Value
- “transparent”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
border:{
color:"#ff0000"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.border.width string
Specifies the border width of grid lines.
Default Value
- “0.5”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
border:{
width:"1"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.fill string
Specifies the fill color of labels in lower level.
Default Value
- “transparent”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
fill:"days"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.gridLineStyle object
Options for customizing the grid lines in lower level.
labelSettings.lowerLevel.gridLineStyle.color string
Specifies the color of grid lines in lower level.
Default Value
- “#B5B5B5”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
gridLineStyle :{
color:"#ff0000"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.gridLineStyle.dashArray string
Specifies the dashArray of gridLines in lowerLevel.
Default Value
- “20 5 0”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
gridLineStyle :{
dashArray:"20 10 5"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.gridLineStyle.width string
Specifies the width of grid lines in lower level.
Default Value
- “#B5B5B5”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
gridLineStyle :{
width:"1"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.intervalType enum
Specifies the intervalType of the labels in lower level.See IntervalType
Default Value
- “auto”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
intervalType:"days"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.labelPlacement enum
Specifies the position of the labels to render either inside or outside of plot area. See LabelPlacement
Default Value
- “outside”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
labelPlacement:"inside"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.position enum
Specifies the position of the labels in lower level.See Position
Default Value
- “bottom”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
position:"bottom"
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style object
Options for customizing the style of labels.
labelSettings.lowerLevel.style.font object
Options for customizing the font of labels.
labelSettings.lowerLevel.style.font.color string
Specifies the color of labels. Label text render in this specified color.
Default Value
- “black”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
color:"red"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.font.fontFamily string
Specifies the font family of labels. Label text render in this specified font family.
Default Value
- “Segoe UI”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
fontFamily: "Algerian"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.font.fontStyle string
Specifies the font style of labels. Label text render in this specified font style.
Default Value
- “Normal”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
fontStyle: "Italic"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.font.fontWeight string
Specifies the font weight of labels. Label text render in this specified font weight.
Default Value
- “regular”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
fontWeight: "regular"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.font.opacity string
Specifies the opacity of labels. Label text render in this specified opacity.
Default Value
- “12px”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
opacity: "0.5"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.font.size string
Specifies the size of labels. Label text render in this specified size.
Default Value
- “12px”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
size: "14px"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.style.horizontalAlignment string
Specifies the horizontal text alignment of the text in label.
Default Value
- “middle”
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
font:{
horizontalAlignment: "left"
}
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.lowerLevel.visible boolean
Toggles the visibility of labels in lower level.
Default Value
- true
Example
this.labelSettings = {
// customizing higher level labels.
lowerLevel: {
visible:false
},
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style object
Options for customizing the style of labels in range navigator.
labelSettings.style.font object
Options for customizing the font of labels in range navigator.
labelSettings.style.font.color string
Specifies the label color. This color is applied to the labels in range navigator.
Default Value
- “#FFFFFF”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
color:"#ff0000"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.font.family string
Specifies the label font family. Labels render with the specified font family.
Default Value
- “Segoe UI”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
family:"Arial"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.font.opacity ` number`
Specifies the label font opacity. Labels render with the specified font opacity.
Default Value
- 1
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
opacity:"0.5"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.font.size string
Specifies the label font size. Labels render with the specified font size.
Default Value
- “1px”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
size:"14px"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.font.style enum
Specifies the label font style. Labels render with the specified font style..
Name | Type | Description |
---|---|---|
Normal | string | The labels are displayed in the default format |
Bold | string | The labels are displayed in Bold format |
Italic | string | The labels are displayed in the italic format |
Specifies the label font style. Labels render with the specified font style..See FontStyle
Default Value
- “Normal”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
style:"Normal"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.font.weight enum
Specifies the label font weight
Name | Type | Description |
---|---|---|
Regular | string | The Labels are displayed in the default manner |
Lighter | string | The Labels are displayed lighter than the normal text |
Specifies the label font weight. Labels render with the specified font weight. See FontWeight
Default Value
- “regular”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
font:{
weight:"Regular"
}
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
labelSettings.style.horizontalAlignment enum
Specifies the horizontalAlignment of the label in RangeNavigator
Name | Type | |
---|---|---|
Middle | string | The labels are aligned to the center |
Left | string | The labels are aligned to the left |
Right | string | The labels are aligned to the right |
Specifies the horizontalAlignment of the label in range navigator. See HorizontalAlignment
Default Value
- “middle”
Example
this.labelSettings = {
// customizing higher level labels.
style:{
horizontalAlignment:"middle"
}
};
<ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
</ej-rangenavigator>
locale string
This property is to specify the localization of range navigator.
Default Value
- “en-US”
Example
<ej-rangenavigator id="rangecontainer" locale="fr-FR">
</ej-rangenavigator>
navigatorStyleSettings object
Options for customizing the range navigator.
navigatorStyleSettings.background string
Specifies the background color of range navigator.
Default Value
- “#dddddd”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
background: "#ff0000",
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.border object
Options for customizing the border color and width of range navigator.
navigatorStyleSettings.border.color string
Specifies the border color of range navigator.
Default Value
- “transparent”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
border:{
color:#ff0000
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.border.dashArray string
Specifies the dash array of range navigator.
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
border:{
dashArray:"2,3"
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.border.width ` number`
Specifies the border width of range navigator.
Default Value
- 0.5
Example
// To customize the navigator element
this.navigatorStyleSettings = {
border:{
width:1
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.leftThumbTemplate string
Specifies the left side thumb template in range navigator we can give either div id or HTML string
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
leftThumbTemplate:"item"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.majorGridLineStyle object
Options for customizing the major grid lines.
navigatorStyleSettings.majorGridLineStyle.color string
Specifies the color of major grid lines in range navigator.
Default Value
- “#B5B5B5”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
majorGridLineStyle:{
color:"#ff0000"
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.majorGridLineStyle.visible boolean
Toggles the visibility of major grid lines.
Default Value
- true
Example
// To customize the navigator element
this.navigatorStyleSettings = {
majorGridLineStyle:{
visible:false
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.minorGridLineStyle object
Options for customizing the minor grid lines.
navigatorStyleSettings.minorGridLineStyle.color string
Specifies the color of minor grid lines in range navigator.
Default Value
- “#B5B5B5”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
minorGridLineStyle:{
color:"#ff0000"
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.minorGridLineStyle.visible boolean
Toggles the visibility of minor grid lines.
Default Value
- true
Example
// To customize the navigator element
this.navigatorStyleSettings = {
minorGridLineStyle:{
visible:true
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.opacity ` number`
Specifies the opacity of RangeNavigator.
Default Value
- 1
Example
// To customize the navigator element
this.navigatorStyleSettings = {
opacity:0.5
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.rightThumbTemplate string
Specifies the right side thumb template in range navigator we can give either div id or HTML string
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
rightThumbTemplate:"item"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectedRegionColor string
Specifies the color of the selected region in range navigator.
Default Value
- “#EFEFEF”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectedRegionColor:"#ff0000"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectedRegionOpacity number
Specifies the opacity of Selected Region.
Default Value
- 0
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectedRegionOpacity:0.5
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.thumbColor string
Specifies the color of the thumb in range navigator.
Default Value
- “#2382C3”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
thumbColor:"#ff0000"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.thumbRadius number
Specifies the radius of the thumb in range navigator.
Default Value
- 10
Example
// To customize the navigator element
this.navigatorStyleSettings = {
thumbRadius:15
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.thumbStroke string
Specifies the stroke color of the thumb in range navigator.
Default Value
- “#303030”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
thumbStroke:"#ff0000"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.unselectedRegionColor string
Specifies the color of the unselected region in range navigator.
Default Value
- “#5EABDE”
Example
// To customize the navigator element
this.navigatorStyleSettings = {
unselectedRegionColor:"#ff0000"
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.unselectedRegionOpacity number
Specifies the opacity of Unselected Region.
Default Value
- 0.3
Example
// To customize the navigator element
this.navigatorStyleSettings = {
unselectedRegionOpacity:0.5
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.highlightSettings object
Contains the options for highlighting the range navigator on mouse over.
navigatorStyleSettings.highlightSettings.enable boolean
Enable the highlight settings in range navigator.
Default Value
- false
Example
// To customize the navigator element
this.navigatorStyleSettings = {
highlightSettings:{
enable: true
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.highlightSettings.color string
To set the color to the highlight.
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
highlightSettings:{
color:"red"
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.highlightSettings.opacity number
To set the opacity to the highlight.
Default Value
- 0.5
Example
// To customize the navigator element
this.navigatorStyleSettings = {
highlightSettings:{
opacity:0.5
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.highlightSettings.border object
Contains the border properties for highlighting rectangle.
navigatorStyleSettings.highlightSettings.border.color string
To set the border color to the highlight.
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
highlightSettings:{
border:{
color:"yellow"
}
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.highlightSettings.border.width number
To set the border width to the highlight.
Default Value
- 1
Example
// To customize the navigator element
this.navigatorStyleSettings = {
highlightSettings:{
border:{
width:1
}
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectionSettings object
Contains the options for selection the range navigator on mouse over.
navigatorStyleSettings.selectionSettings.enable boolean
Enable the selection settings in range navigator.
Default Value
- false
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectionSettings:{
enable:false
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectionSettings.color string
To set the color to the selection.
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectionSettings:{
color:"green"
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectionSettings.opacity number
To set the opacity to the selection.
Default Value
- 0.5
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectionSettings:{
opacity:0.5
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectionSettings.border object
Contains the border properties for selecting the rectangle.
navigatorStyleSettings.selectionSettings.border.color string
To set the border color to the selection.
Default Value
- null
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectionSettings:{
border:{
color:"red"
}
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
navigatorStyleSettings.selectionSettings.border.width number
To set the border width to the selection.
Default Value
- 1
Example
// To customize the navigator element
this.navigatorStyleSettings = {
selectionSettings:{
border:{
width:1
}
}
};
<ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
</ej-rangenavigator>
padding string
Padding specifies the gap between the container and the range navigator.
Default Value
- “0”
Example
<ej-rangenavigator id="rangecontainer" [padding]=15>
</ej-rangenavigator>
rangePadding enum
If the range is not given explicitly, range will be calculated automatically.
Name | Type | Description |
---|---|---|
Additional | string | The range is added with an extra interval when the RangePadding is set as Additional |
Normal | string | The automatic range calculation differs based on the data when the RangePadding is set as Normal |
None | string | The Range is calculated based on the minimum and maximum value in the data when the RangePadding is set as None |
Round | string | The Range is rounded to the nearest possible values when the RangePadding is set as Round |
If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding. See RangePadding
Default Value
- “none”
Example
<ej-rangenavigator id="rangecontainer" rangePadding = "normal">
</ej-rangenavigator>
rangeSettings object
Options for customizing the starting and ending ranges.
rangeSettings.end string
Specifies the ending range of range navigator.
Default Value
- null
Example
this.rangeSettings = {
end:"01/05/1993"
};
<ej-rangenavigator id="rangecontainer" [rangeSettings]="rangeSettings">
</ej-rangenavigator>
rangeSettings.start string
Specifies the starting range of range navigator.
Default Value
- null
Example
this.rangeSettings = {
start:"01/05/1993"
};
<ej-rangenavigator id="rangecontainer" [rangeSettings]="rangeSettings">
</ej-rangenavigator>
selectedData object
selectedData is for getting the data when the “rangeChanged” event trigger from client side.
selectedRangeSettings object
Options for customizing the start and end range values.
selectedRangeSettings.end string
Specifies the ending range of range navigator.
Default Value
- null
Example
this.selectedRangeSettings = {
end:"01/05/1993"
};
<ej-rangenavigator id="rangecontainer" [selectedRangeSettings]="selectedRangeSettings">
</ej-rangenavigator>
selectedRangeSettings.start string
Specifies the starting range of range navigator.
Default Value
- null
Example
this.series = {
fill:"red"
};
<ej-rangenavigator id="rangecontainer" [series]="series">
</ej-rangenavigator>
scrollRangeSettings object
Options for rendering scrollbar based on the start and end range values.
scrollRangeSettings.end string
Specifies the ending range of range navigator scrollbar and that should be greater than the rangenavigator datasource end value.
Default Value
- null
Example
this.scrollRangeSettings = {
end:"01/05/1993"
};
<ej-rangenavigator id="rangecontainer" [scrollRangeSettings]="scrollRangeSettings">
</ej-rangenavigator>
scrollRangeSettings.start string
Specifies the starting range of range navigator scrollbar and that should be less than the rangenavigator datasource start value.
Default Value
- null
Example
this.scrollRangeSettings = {
start:"01/05/1992"
};
<ej-rangenavigator id="rangecontainer" [scrollRangeSettings]="scrollRangeSettings">
</ej-rangenavigator>
sizeSettings object
Contains property to customize the hight and width of range navigator.
sizeSettings.height string
Specifies height of the range navigator.
Default Value
- null
Example
this.sizeSettings = {
height:130
};
<ej-rangenavigator id="rangecontainer" [sizeSettings]="sizeSettings">
</ej-rangenavigator>
sizeSettings.width string
Specifies width of the range navigator.
Default Value
- null
Example
this.sizeSettings = {
width:900
};
<ej-rangenavigator id="rangecontainer" [sizeSettings]="sizeSettings">
</ej-rangenavigator>
theme string
By specifying this property the user can change the theme of the range navigator.
Default Value
- null
Example
<ej-rangenavigator id="rangecontainer" theme="azuredark">
</ej-rangenavigator>
tooltipSettings object
Options for customizing the tooltip in range navigator.
Example
tooltipSettings.backgroundColor string
Specifies the background color of tooltip.
Default Value
- “#303030”
Example
this.tooltipSettings = {
backgroundColor: "#303030"
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font object
Options for customizing the font in tooltip.
tooltipSettings.font.color string
Specifies the color of text in tooltip. Tooltip text render in the specified color.
Default Value
- “#FFFFFF”
Example
this.tooltipSettings = {
font:{
color : "FFFFFF"
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font.family string
Specifies the font family of text in tooltip. Tooltip text render in the specified font family.
Default Value
- “Segoe UI”
Example
this.tooltipSettings = {
font:{
family:"Arial"
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font.fontStyle string
Specifies the font style of text in tooltip. Tooltip text render in the specified font style.
Default Value
- ej.datavisualization.RangeNavigator.fontStyle.Normal
Example
this.tooltipSettings = {
font:{
fontStyle:"Normal"
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font.opacity ` number`
Specifies the opacity of text in tooltip. Tooltip text render in the specified opacity.
Default Value
- 1
Example
this.tooltipSettings = {
font:{
opacity:0.5
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font.size string
Specifies the size of text in tooltip. Tooltip text render in the specified size.
Default Value
- “10px”
Example
this.tooltipSettings = {
font:{
size:"15px"
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.font.weight string
Specifies the weight of text in tooltip. Tooltip text render in the specified weight.
Default Value
- ej.datavisualization.RangeNavigator.weight.Regular
Example
this.tooltipSettings = {
font:{
fontWeight:"regular"
}
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.labelFormat string
Specifies the format of text to be displayed in tooltip.
Default Value
- “MM/dd/yyyy”
Example
this.tooltipSettings = {
labelFormat: "MM/dd/yyyy"
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.tooltipDisplayMode string
Specifies the mode of displaying the tooltip. Neither to display the tooltip always nor on demand.
Default Value
- null
Example
this.tooltipSettings = {
tooltipDisplayMode: "always"
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
tooltipSettings.visible boolean
Toggles the visibility of tooltip.
Default Value
- true
Example
this.tooltipSettings = {
visible: true
};
<ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
</ej-rangenavigator>
valueAxisSettings object
Options for configuring minor grid lines, major grid lines, axis line of axis.
valueAxisSettings.axisLine object
Options for customizing the axis line.
valueAxisSettings.axisLine.visible string
Toggles the visibility of axis line.
Default Value
- “none”
Example
this.valueAxisSettings = {
axisLine: {
visible:true
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.font object
Options for customizing the font of the axis.
valueAxisSettings.font.size string
Text in axis render with the specified size.
Default Value
- “0px”
Example
this.valueAxisSettings = {
font: {
size: '12px'
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.majorGridLines object
Options for customizing the major grid lines.
valueAxisSettings.majorGridLines.visible boolean
Toggles the visibility of major grid lines.
Default Value
- false
Example
this.valueAxisSettings = {
majorGridLines: {
visible: true
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.majorTickLines object
Options for customizing the major tick lines in axis.
valueAxisSettings.majorTickLines.size number
Specifies the size of the majorTickLines in range navigator
Default Value
- 0
Example
this.valueAxisSettings = {
majorTickLines: {
size: "15px"
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.majorTickLines.visible boolean
Toggles the visibility of major tick lines.
Default Value
- true
Example
this.valueAxisSettings = {
majorTickLines: {
size: "15px"
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.majorTickLines.width number
Specifies width of the major tick lines.
Default Value
- 0
Example
this.valueAxisSettings = {
majorTickLines: {
width: 1
}
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.rangePadding string
If the range is not given explicitly, range will be calculated automatically. You can customize the automatic range calculation using rangePadding.
Default Value
- “none”
Example
this.valueAxisSettings = {
rangePadding: "normal"
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueAxisSettings.visible boolean
Toggles the visibility of axis in range navigator.
Default Value
- false
Example
this.valueAxisSettings = {
visible: false
};
<ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
</ej-rangenavigator>
valueType enum
You can plot data of type date time or numeric. This property determines the type of data that this axis will handle.
Name | Type | Description |
---|---|---|
Numeric | string | The numeric data is used in the RangeNavigator then the ValueType is set as Numeric |
DateTime | string | The default value type of Range Navigator is DateTime and it represents the DateTime Values |
Default Value
- “datetime”
Example
<ej-rangenavigator id="rangecontainer" valueType ="numeric">
</ej-rangenavigator>
xName object
Specifies the xName for dataSource. This is used to take the x values from dataSource
Example
<ej-rangenavigator id="rangecontainer" xName ="X">
</ej-rangenavigator>
yName object
Specifies the yName for dataSource. This is used to take the y values from dataSource
Example
<ej-rangenavigator id="rangecontainer" yName ="Y">
</ej-rangenavigator>
zoomSettings.zoomFactor string
This property determines the factor by which the axis is scaled. Value must be specified between 0 and 1.
Default Value
- “1”
Example
this.zoomSettings = {
zoomFactor: 1
};
<ej-rangenavigator id="rangecontainer" [zoomSettings]="zoomSettings">
</ej-rangenavigator>
zoomSettings.zoomPosition string
This property determines the starting position of the zoomed axis. Value must be specified between 0 and 1.
Default Value
- “0”
Example
this.zoomSettings = {
zoomFactor: 0
};
<ej-rangenavigator id="rangecontainer" [zoomSettings]="zoomSettings">
</ej-rangenavigator>
Methods
_destroy ()
destroy the range navigator widget
Returns: void
Example
destroy(){
//Do something
this.range.widget.destroy();
}
Events
load
Fires on load of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
load(sender){
//Do something
}
<ej-rangenavigator id="events" (load)="load($event)">
</ej-rangenavigator>
loaded
Fires after range navigator is loaded.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
onloaded(sender){
//Do something
}
<ej-rangenavigator id="events" (loaded)="onloaded($event)">
</ej-rangenavigator>
rangeChanged
Fires on changing the range of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from range navigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the range navigator model |
|
string | returns the name of the event |
Example
onrangechanged(sender){
//Do something
}
<ej-rangenavigator id="events" (rangeChanged)="onrangechanged($event)">
</ej-rangenavigator>
scrollChanged
Fires on changing the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
object | returns the scrollbar position old start and end range value on changing scrollbar |
|
Object | returns the scrollbar position new start and end range value on changing scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
onscrollchanged(sender){
//Do something
}
<ej-rangenavigator id="events" (scrollChanged)="onscrollchanged($event)">
</ej-rangenavigator>
scrollStart
Fires on when starting to change the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
string | returns the scrollbar position starting range value on changing scrollbar |
|
string | returns the scrollbar position end range value on changing scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
onscrollstart(sender){
//Do something
}
<ej-rangenavigator id="events" (scrollStart)="onscrollstart($event)">
</ej-rangenavigator>
selectedRangeStart
Fires on when starting to change the slider position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
onselectedrangestart(sender){
//Do something
}
<ej-rangenavigator id="events" (selectedRangeStart)="onselectedrangestart($event)">
</ej-rangenavigator>
selectedRangeEnd
Fires when the selection ends in the range navigator
Name | Type | Description |
---|---|---|
|
object | parameters from RangeNavigator |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
onselectedrangeend(sender){
//Do something
}
<ej-rangenavigator id="events" (selectedRangeEnd)="onselectedrangeend($event)">
</ej-rangenavigator>
scrollEnd
Fires on changes ending the scrollbar position of range navigator.
Name | Type | Description |
---|---|---|
|
Object | parameters from RangeNavigator |
|
object | returns the scrollbar position old start and end range value on change end of scrollbar |
|
Object | returns the scrollbar position new start and end range value on change end of scrollbar |
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
onscrollend(sender){
//Do something
}
<ej-rangenavigator id="events" (scrollEnd)="onscrollend($event)">
</ej-rangenavigator>