React RangeSelector - background

Specifies the properties for the range selector's background.

Selector: 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 property only when the range selector displays an image or chart. If not, use the selectedRangeColor and tick to customize the appearance of your UI component.

View Demo

color

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 property supports the following colors:

image

Specifies image properties.

Selector: Image
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 UI component's width.

The height of the specified image must be less than or equal to the following value ("-" stands for subtract): the UI component'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.

View Demo

visible

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

Type:

Boolean

Default Value: true