ejRangeNavigator

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
  • html
  • options
    object settings for range navigator
  • html
  • options
    object settings for range navigator

    Example

  • html
  • <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

  • html
  • <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

  • html
  • <ej-rangenavigator id="rangecontainer" border.color ="green">
    </ej-rangenavigator>

    border.opacity number

    Opacity of the rangeNavigator border.

    Default Value

    • 1

    Example

  • html
  • <ej-rangenavigator id="rangecontainer" [border.opacity] =0.5>
    </ej-rangenavigator>

    border.width number

    Width of the RangeNavigator border.

    Default Value

    • 1

    Example

  • html
  • <ej-rangenavigator id="rangecontainer" [border.width] =1>
    </ej-rangenavigator>

    dataSource object

    Specifies the data source for range navigator.

    Example

  • html
  • <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

  • ts
  • this.series = {   
     xName:"XValue"
    };
  • html
  • <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

  • ts
  • this.series = {   
     yName:"YValue"
    };
  • html
  • <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

  • ts
  • this.series = {   
     dataSource:"data"
    };
  • html
  • <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

  • ts
  • this.series = {   
     type:"line"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [series]="series">
    </ej-rangenavigator>

    series.enableAnimation boolean

    Enable/disable the animation of series.

    Default Value

    • false

    Example

  • ts
  • this.series = {   
     enableAnimation:true
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [series]="series">
    </ej-rangenavigator>

    series.fill string

    Fill color of the series.

    Default Value

    • null

    Example

  • html
  • <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

  • html
  • <ej-rangenavigator id="rangecontainer" [enableDeferredUpdate] ="false">
    </ej-rangenavigator>

    enableScrollbar boolean

    Enable the scrollbar option in the rangenavigator.

    Default Value

    • false

    Example

  • html
  • <ej-rangenavigator id="rangecontainer" [enableRTL] ="true">
    </ej-rangenavigator>

    enableRTL boolean

    Toggles the direction of rendering the range navigator control.

    Default Value

    • false

    Example

  • html
  • <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

  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           border:{
               color:'#ff0000'
           }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           border:{
               width:1
           }
        },    
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
    </ej-rangenavigator>

    labelSettings.higherLevel.fill string

    Specifies the fill color of higher level labels.

    Default Value

    • “transparent”

    Example

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           fill:"days"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           gridLineStyle :{
               color:"#ff0000"
           }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           gridLineStyle :{
               dashArray:"20 10 5"
           }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
           gridLineStyle :{
               width:1
           }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
          intervalType:"days"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
         labelPlacement:"inside"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
         position:"bottom"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                color:"red"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                fontFamily:"Algerian"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                fontStyle:"Italic"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                fontWeight:"regular"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                opacity:"0.5"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            font:{
                size:"14px"
            }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            horizontalAlignment: "left"
        },    
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
    </ej-rangenavigator>

    labelSettings.higherLevel.visible boolean

    Toggles the visibility of higher level labels.

    Default Value

    • true

    Example

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        higherLevel: {
            visible: false
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          border:{
              color:"#ff0000"
          }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          border:{
              width:"1"
          }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          fill:"days"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          gridLineStyle :{
              color:"#ff0000"
          }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          gridLineStyle :{
              dashArray:"20 10 5"
          }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
          gridLineStyle :{
              width:"1"
          }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         intervalType:"days"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         labelPlacement:"inside"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         position:"bottom"
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
             color:"red"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
            fontFamily: "Algerian"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
           fontStyle: "Italic"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
           fontWeight: "regular"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
           opacity: "0.5"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
           size: "14px"
         }
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
         font:{
           horizontalAlignment: "left"
         }
        },    
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [labelSettings]="labelSettings">
    </ej-rangenavigator>

    labelSettings.lowerLevel.visible boolean

    Toggles the visibility of labels in lower level.

    Default Value

    • true

    Example

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        lowerLevel: {
           visible:false
        },    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
                color:"#ff0000"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
                family:"Arial"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
                opacity:"0.5"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
                size:"14px"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
               style:"Normal"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
            font:{
               weight:"Regular"
            }
        }    
    };
  • html
  • <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

  • ts
  • this.labelSettings = {
        // customizing higher level labels.
        style:{
           horizontalAlignment:"middle"
        }    
    };
  • html
  • <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

  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        background: "#ff0000",    
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        border:{
            color:#ff0000
        }   
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.border.dashArray string

    Specifies the dash array of range navigator.

    Default Value

    • null

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        border:{
           dashArray:"2,3"
        }   
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.border.width ` number`

    Specifies the border width of range navigator.

    Default Value

    • 0.5

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        border:{
          width:1
        }   
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        leftThumbTemplate:"item"   
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        majorGridLineStyle:{
            color:"#ff0000"
        } 
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.majorGridLineStyle.visible boolean

    Toggles the visibility of major grid lines.

    Default Value

    • true

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        majorGridLineStyle:{
            visible:false
        } 
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        minorGridLineStyle:{
            color:"#ff0000"
        } 
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.minorGridLineStyle.visible boolean

    Toggles the visibility of minor grid lines.

    Default Value

    • true

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        minorGridLineStyle:{
            visible:true
        } 
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.opacity ` number`

    Specifies the opacity of RangeNavigator.

    Default Value

    • 1

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        opacity:0.5
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        rightThumbTemplate:"item"
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
       selectedRegionColor:"#ff0000"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.selectedRegionOpacity number

    Specifies the opacity of Selected Region.

    Default Value

    • 0

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
       selectedRegionOpacity:0.5
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.thumbColor string

    Specifies the color of the thumb in range navigator.

    Default Value

    • “#2382C3”

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
       
       thumbColor:"#ff0000"
       
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.thumbRadius number

    Specifies the radius of the thumb in range navigator.

    Default Value

    • 10

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {   
       thumbRadius:15   
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {   
      thumbStroke:"#ff0000" 
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {   
       unselectedRegionColor:"#ff0000"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.unselectedRegionOpacity number

    Specifies the opacity of Unselected Region.

    Default Value

    • 0.3

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {   
      unselectedRegionOpacity:0.5
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        highlightSettings:{
          enable: true
        }    
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.highlightSettings.color string

    To set the color to the highlight.

    Default Value

    • null

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        highlightSettings:{
           color:"red" 
        }    
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.highlightSettings.opacity number

    To set the opacity to the highlight.

    Default Value

    • 0.5

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        highlightSettings:{
          opacity:0.5
        }    
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        highlightSettings:{
           border:{
              color:"yellow"
           }   
        }    
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
        highlightSettings:{
           border:{
              width:1
           }   
        }    
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
      selectionSettings:{
       enable:false
      }
       
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.selectionSettings.color string

    To set the color to the selection.

    Default Value

    • null

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
      selectionSettings:{
       color:"green"
      }
       
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [navigatorStyleSettings]="navigatorStyleSettings">
    </ej-rangenavigator>

    navigatorStyleSettings.selectionSettings.opacity number

    To set the opacity to the selection.

    Default Value

    • 0.5

    Example

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
      selectionSettings:{
        opacity:0.5
      }
       
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
      selectionSettings:{
        border:{
           color:"red"
        }
      }
       
    };
  • html
  • <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

  • ts
  • //  To customize the navigator element     
    this.navigatorStyleSettings = {
      selectionSettings:{
        border:{
           width:1
        }
      }
       
    };
  • html
  • <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

  • html
  • <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

  • html
  • <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

  • ts
  • this.rangeSettings = {   
      end:"01/05/1993"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [rangeSettings]="rangeSettings">
    </ej-rangenavigator>

    rangeSettings.start string

    Specifies the starting range of range navigator.

    Default Value

    • null

    Example

  • ts
  • this.rangeSettings = {   
      start:"01/05/1993"
    };
  • html
  • <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

  • ts
  • this.selectedRangeSettings = {   
     end:"01/05/1993"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [selectedRangeSettings]="selectedRangeSettings">
    </ej-rangenavigator>

    selectedRangeSettings.start string

    Specifies the starting range of range navigator.

    Default Value

    • null

    Example

  • ts
  • this.series = {   
     fill:"red"
    };
  • html
  • <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

  • ts
  • this.scrollRangeSettings = {   
      end:"01/05/1993"
    };
  • html
  • <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

  • ts
  • this.scrollRangeSettings = {   
     start:"01/05/1992"
    };
  • html
  • <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

  • ts
  • this.sizeSettings = {   
     height:130
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [sizeSettings]="sizeSettings">
    </ej-rangenavigator>

    sizeSettings.width string

    Specifies width of the range navigator.

    Default Value

    • null

    Example

  • ts
  • this.sizeSettings = {   
     width:900
    };
  • html
  • <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

  • html
  • <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

  • ts
  • this.tooltipSettings = {   
     backgroundColor: "#303030"
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            color : "FFFFFF"       
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            family:"Arial"      
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            fontStyle:"Normal"   
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            opacity:0.5  
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            size:"15px"  
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        font:{
            fontWeight:"regular"
        }
     
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
            labelFormat: "MM/dd/yyyy"
    };
  • html
  • <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

  • ts
  • this.tooltipSettings = {   
        tooltipDisplayMode: "always"
     
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [tooltipSettings]="tooltipSettings">
    </ej-rangenavigator>

    tooltipSettings.visible boolean

    Toggles the visibility of tooltip.

    Default Value

    • true

    Example

  • ts
  • this.tooltipSettings = {   
        visible: true
     
    };
  • html
  • <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

  • ts
  • this.valueAxisSettings = {   
        axisLine: {
            visible:true
        }
     
    };
  • html
  • <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

  • ts
  • this.valueAxisSettings = {   
        font: {
          size: '12px'
        }
     
    };
  • html
  • <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

  • ts
  • this.valueAxisSettings = {   
        majorGridLines: {
            visible: true
        }
     
    };
  • html
  • <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

  • ts
  • this.valueAxisSettings = {   
        majorTickLines: {
            size: "15px"
        }
     
    };
  • html
  • <ej-rangenavigator id="rangecontainer"  [valueAxisSettings]="valueAxisSettings">
    </ej-rangenavigator>

    valueAxisSettings.majorTickLines.visible boolean

    Toggles the visibility of major tick lines.

    Default Value

    • true

    Example

  • ts
  • this.valueAxisSettings = {   
        majorTickLines: {
            size: "15px"
        }
     
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
    </ej-rangenavigator>

    valueAxisSettings.majorTickLines.width number

    Specifies width of the major tick lines.

    Default Value

    • 0

    Example

  • ts
  • this.valueAxisSettings = {   
        majorTickLines: {
            width: 1
        }
     
    };
  • html
  • <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

  • ts
  • this.valueAxisSettings = {   
        rangePadding: "normal"
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [valueAxisSettings]="valueAxisSettings">
    </ej-rangenavigator>

    valueAxisSettings.visible boolean

    Toggles the visibility of axis in range navigator.

    Default Value

    • false

    Example

  • ts
  • this.valueAxisSettings = {   
        visible: false
    };
  • html
  • <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

  • html
  • <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

  • html
  • <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

  • html
  • <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

  • ts
  • this.zoomSettings = {   
        zoomFactor: 1
    };
  • html
  • <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

  • ts
  • this.zoomSettings = {   
        zoomFactor: 0
    };
  • html
  • <ej-rangenavigator id="rangecontainer" [zoomSettings]="zoomSettings">
    </ej-rangenavigator>

    Methods

    _destroy ()

    destroy the range navigator widget

    Returns: void

    Example

  • ts
  • destroy(){
         
         //Do something
         this.range.widget.destroy();
    
    }

    Events

    load

    Fires on load of range navigator.

    Name Type Description
  • html
  • Data
    Object parameters from range navigator
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the range navigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • load(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (load)="load($event)">
    </ej-rangenavigator>

    loaded

    Fires after range navigator is loaded.

    Name Type Description
  • html
  • Data
    Object parameters from range navigator
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the range navigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onloaded(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (loaded)="onloaded($event)">
    </ej-rangenavigator>

    rangeChanged

    Fires on changing the range of range navigator.

    Name Type Description
  • html
  • Data
    Object parameters from range navigator
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the range navigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onrangechanged(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (rangeChanged)="onrangechanged($event)">
    </ej-rangenavigator>

    scrollChanged

    Fires on changing the scrollbar position of range navigator.

    Name Type Description
  • html
  • data
    Object parameters from RangeNavigator
  • html
  • dataoldRange
    object returns the scrollbar position old start and end range value on changing scrollbar
  • html
  • datanewRange
    Object returns the scrollbar position new start and end range value on changing scrollbar
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the RangeNavigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onscrollchanged(sender){
         
         //Do something
    
    }
  • html
  • <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
  • html
  • data
    Object parameters from RangeNavigator
  • html
  • datastartRange
    string returns the scrollbar position starting range value on changing scrollbar
  • html
  • dataendRange
    string returns the scrollbar position end range value on changing scrollbar
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the RangeNavigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onscrollstart(sender){
         
         //Do something
    
    }
  • html
  • <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
  • html
  • data
    Object parameters from RangeNavigator
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the RangeNavigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onselectedrangestart(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (selectedRangeStart)="onselectedrangestart($event)">
    </ej-rangenavigator>

    selectedRangeEnd

    Fires when the selection ends in the range navigator

    Name Type Description
  • html
  • data
    object parameters from RangeNavigator
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the RangeNavigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onselectedrangeend(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (selectedRangeEnd)="onselectedrangeend($event)">
    </ej-rangenavigator>

    scrollEnd

    Fires on changes ending the scrollbar position of range navigator.

    Name Type Description
  • html
  • data
    Object parameters from RangeNavigator
  • html
  • dataoldRange
    object returns the scrollbar position old start and end range value on change end of scrollbar
  • html
  • datanewRange
    Object returns the scrollbar position new start and end range value on change end of scrollbar
  • html
  • cancel
    boolean if the event should be canceled; otherwise, false.
  • html
  • model
    object returns the RangeNavigator model
  • html
  • type
    string returns the name of the event

    Example

  • ts
  • onscrollend(sender){
         
         //Do something
    
    }
  • html
  • <ej-rangenavigator id="events" (scrollEnd)="onscrollend($event)">
    </ej-rangenavigator>