Specifies the options for the range selector's background.

Type: Object

A background is an area that is painted in a specified color. You can change this color by setting the background's color property and by displaying an image specified by the image configuration object. In addition, you can superimpose a chart on a background by specifying the chart configuration object. The chart will be shown with the specified background color. To show the chart without a background, set the background's visible property to false.

NOTE: You can use this option only when the range selector displays an image or chart. If not, use the selectedRangeColor and tick to customize the appearance of your widget.

Show Example:

In this example, the color of the background is changed to lightblue.




Specifies the background color for the RangeSelector.

Type: String
Default Value: '#C0BAE1'

You may need to use this property in the following cases:

  • to set an appropriate background color when a specified background image does not fill the entire background area;
  • to set a custom background color for the chart displayed in the background.

This option supports the following colors.

Show Example:

In this example, the color option of the background is set to #FFE4B5.




Specifies image options.

Type: Object

You can display an image as the background of a range selector instead of the default color. Set the image's URL and location using the corresponding properties of the image object to do this.

The width of the specified image must be less than or equal to the widget's width.

The height of the specified image must be less than or equal to the following value ("-" stands for subtract): the widget's height - the scale's placeholderHeight.

If the image size is smaller than the background size, a default background color will be displayed in the remaining area. You can set a custom color (e.g. an empty color) for the background using the color property of the background configuration object.

To see an example of how to show an image in the background, refer to the Customize the Appearance lesson in the Getting Started section.

View Demo

Show Example:

In this example, an image of a plane is displayed in the background. The image's location option is changed to 'leftCenter'.




Indicates whether or not the background (background color and/or image) is visible.

Type: Boolean
Default Value: true

Show Example:

Toggle the check box below to change the visibility of the background.