valueAxis strips[]

    Declares a collection of strips belonging to the value axis.

    Type: Array
    Cannot be used in themes.

    A strip is a colored piece of the chart's background that highlights a range of values. Strips allow a viewer to see whether a certain series point falls in or out of a range.

    DevExtreme HTML5 Charts Strips

    Each object in the strips array configures a single strip. To limit a strip, set its startValue and endValue options. You may set only one of them, in which case the strip will not have a limit at one end. Note that setting the color option is also necessary for a strip to be displayed.

    See Also
    • valueAxis | stripStyle - specifies the appearance of those strips that belong to the value axis.
    • commonAxisSettings | stripStyle - specifies the appearance of all strips in the widget.
    Show Example:
    jQuery

    In this example, the value axis strips are defined and colored in a custom color.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { year: 1950, europe: 546, americas: 332, africa: 227 },
        { year: 2050, europe: 650, americas: 1231, africa: 1937 },
        { year: 2040, europe: 680, americas: 1178, africa: 1665 },
        { year: 2030, europe: 704, americas: 1110, africa: 1416 },
        { year: 2020, europe: 721, americas: 1027, africa: 1189 },
        { year: 2010, europe: 728, americas: 935, africa: 982 },
        { year: 2000, europe: 730, americas: 836, africa: 797 },
        { year: 1990, europe: 721, americas: 721, africa: 623 },
        { year: 1980, europe: 694, americas: 614, africa: 471 },
        { year: 1970, europe: 656, americas: 513, africa: 361 },
        { year: 1960, europe: 605, americas: 417, africa: 283 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            valueAxis: {
                strips: [
                    { startValue: 200, endValue: 250, color: 'rgba(68, 100, 213, 0.2)' },
                    { startValue: 700, endValue: 900, color: 'rgba(68, 100, 213, 0.2)' },
                    { startValue: 1900, endValue: 2000, color: 'rgba(68, 100, 213, 0.2)' }
                ]
            }
        });
    });

    color

    Specifies the color of the strip.

    Type: String
    Default Value: undefined

    This option supports the following colors.

    endValue

    Along with the startValue option, limits the strip.

    Default Value: undefined

    label

    Configures the strip label.

    Type: Object

    Setting the text option is necessary for a strip label to be displayed.

    See Also
    • valueAxis | stripStyle | label - specifies a unified style for the labels of those strips that belong to the value axis.
    • commonAxisSettings | stripStyle | label - specifies a unified style for the labels of all strips in the widget.
    Show Example:
    jQuery

    In the following example, the value axis strips have labels.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { year: 1950, europe: 546, americas: 332, africa: 227 },
        { year: 2050, europe: 650, americas: 1231, africa: 1937 },
        { year: 2040, europe: 680, americas: 1178, africa: 1665 },
        { year: 2030, europe: 704, americas: 1110, africa: 1416 },
        { year: 2020, europe: 721, americas: 1027, africa: 1189 },
        { year: 2010, europe: 728, americas: 935, africa: 982 },
        { year: 2000, europe: 730, americas: 836, africa: 797 },
        { year: 1990, europe: 721, americas: 721, africa: 623 },
        { year: 1980, europe: 694, americas: 614, africa: 471 },
        { year: 1970, europe: 656, americas: 513, africa: 361 },
        { year: 1960, europe: 605, americas: 417, africa: 283 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            valueAxis: {
                strips: [
                    {
                        startValue: 200, endValue: 250, color: 'rgba(68, 100, 213, 0.2)',
                        label: { text: 'Lowest', horizontalAlignment: 'right' }
                    },
                    { startValue: 700, endValue: 900, color: 'rgba(68, 100, 213, 0.2)' },
                    {
                        startValue: 1900, endValue: 2000, color: 'rgba(68, 100, 213, 0.2)',
                        label: { text: 'Highest' }
                    }
                ]
            }
        });
    });

    paddingLeftRight

    Generates a pixel-measured empty space between the left/right border of a strip and the strip label.

    Type: Number
    Default Value: 10

    This option depends on the label | horizontalAlignment in the following way.

    • horizontalAlignment is "left" → padding applies to the left border of a strip;
    • horizontalAlignment is "right" → padding applies to the right border of a strip;
    • horizontalAlignment is "center" → padding is calculated automatically.

    DevExtreme HTML5 Charts StripPadding

    See Also
    • commonAxisSettings | stripStyle | label | horizontalAlignment - aligns strip labels in the horizontal direction. Applies to all strips.
    • argumentAxis | stripStyle | label | horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the argument axis.
    • valueAxis | stripStyle | label | horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the value axis.

    paddingTopBottom

    Generates a pixel-measured empty space between the top/bottom border of a strip and the strip label.

    Type: Number
    Default Value: 5

    This option depends on the label | verticalAlignment in the following way.

    • verticalAlignment is "top" → padding applies to the top border of a strip;
    • verticalAlignment is "bottom" → padding applies to the bottom border of a strip;
    • verticalAlignment is "center" → padding is calculated automatically.

    DevExtreme HTML5 Charts StripPadding

    See Also
    • commonAxisSettings | stripStyle | label | verticalAlignment - aligns strip labels in the vertical direction. Applies to all strips.
    • argumentAxis | stripStyle | label | verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the argument axis.
    • valueAxis | stripStyle | label | verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the value axis.

    startValue

    Along with the endValue option, limits the strip.

    Default Value: undefined