Configuration shutter

Specifies range selector shutter options.

Type: Object

Shutters are used in the dxRangeSelector widget with the background (image or chart) to hide the non-selected range. When using shutters, the background area for a selected range is clearly visible, and the remaining area is hidden by the shutters.

Show Example:
jQuery

In this example, the shutter's color and opacity options are changed.

<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' }
            ],
        },
        selectedRange: {
            startValue: 20,
            endValue: 60
        },
        shutter: {
            color: 'aquamarine',
            opacity: 0.25
        }
    });
});

color

Specifies shutter color.

Type: String
Default Value: undefined

The background color of the parent container is used for shutters by default with applied opacity. You can set a custom color for all elements, including the shutters, that use the container's background color. Use the dxRangeSelector's containerBackgroundColor configuration property to do this. To set a custom color for shutters only, use the shutter's color property directly.

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 shutter's color option is set to 'palegreen'.

<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' }
            ],
        },
        selectedRange: {
            startValue: 20,
            endValue: 60
        },
        shutter: {
            color: 'palegreen'
        }
    });
});

opacity

Specifies the opacity of the color of shutters.

Type: Number
Default Value: 0.75

Show Example:
jQuery

In this example, the shutter's opacity option is set to 0.25.

<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' }
            ],
        },
        selectedRange: {
            startValue: 20,
            endValue: 60
        },
        shutter: {
            opacity: 0.25
        }
    });
});