Configuration background

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:
jQuery

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

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { arg: 10,  y1: 0,  y2: 10 },
            { arg: 15,  y1: 6,  y2: 12 },
            { arg: 20,  y1: 8,  y2: 15 },
            { arg: 30,  y1: 10, y2: 10 },
            { arg: 50,  y1: 16, y2: 5 },
            { arg: 150, y1: 12, y2: 6 },
            { arg: 180, y1: 8,  y2: 10 }
        ],
        chart: {
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
        },
        background: {
            color: 'lightblue'
        }
    });
});

color

Specifies the background color for the dxRangeSelector.

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.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

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

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { arg: 10, y1: 0, y2: 10 },
            { arg: 15, y1: 6, y2: 12 },
            { arg: 20, y1: 8, y2: 15 },
            { arg: 30, y1: 10, y2: 10 },
            { arg: 50, y1: 16, y2: 5 },
            { arg: 150, y1: 12, y2: 6 },
            { arg: 180, y1: 8, y2: 10 }
        ],
        chart: {
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
        },
        background: {
            color: '#FFE4B5'
        }
    });
});

image

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:
jQuery

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

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 10
        },
        background: {
            image: {
                url: '/Content/images/doc/15_2/ChartJS/flight.png',
                location: 'leftCenter'
            }
        }
    });
});

visible

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

Type: Boolean
Default Value: true

Show Example:
jQuery

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

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="visibleBackgroundCheckbox" checked> Show Background
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: [
            { arg: 10, y1: 0, y2: 10 },
            { arg: 15, y1: 6, y2: 12 },
            { arg: 20, y1: 8, y2: 15 },
            { arg: 30, y1: 10, y2: 10 },
            { arg: 50, y1: 16, y2: 5 },
            { arg: 150, y1: 12, y2: 6 },
            { arg: 180, y1: 8, y2: 10 }
        ],
        chart: {
            series: [
                { valueField: 'y1' },
                { valueField: 'y2' }
            ],
        },
        background: {
            color: '#FFE4B5'
        }
    });

    $('#visibleBackgroundCheckbox').change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            background: { visible: this.checked }
        });
    });
})