stripStyle label

    An object defining the configuration options for a strip label style.

    Type: Object

    A strip label displays descriptive information on a strip. To set options for configuring the strip label style, define the stripStyle | label object within the argumentAxis or valueAxis configuration object. To set common options for all strip labels in a chart, define the stripStyle | label object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

    Show Example:
    jQuery

    In the example below, the strip label's text is colored in blue.

    <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' }
            ],
            argumentAxis: {
                strips: [{
                    startValue: 2013, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }],
                stripStyle: {
                    label: { font: { color: 'blue' } }
                }
            }
        });
    });

    font

    Specifies font options for a strip label.

    Type: Object

    Show Example:
    jQuery

    In this example, the font options for the argument axis strip label are altered.

    <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' }
            ],
            argumentAxis: {
                strips: [{
                    startValue: 2013, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }],
                stripStyle: {
                    label: {
                        font: {
                            color: 'blue',
                            family: 'Zapf-Chancery, cursive',
                            opacity: 1,
                            size: 14,
                            weight: 700
                        }
                    }
                }
            }
        });
    });

    horizontalAlignment

    Specifies the label's position on a strip.

    Type: String
    Default Value: 'left'
    Accepted Values: 'right' | 'center' | 'left'

    Show Example:
    jQuery

    In the example below, the strip label's text is colored in blue and located in the center of the strip.

    <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' }
            ],
            argumentAxis: {
                strips: [{
                    startValue: 2013, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }],
                stripStyle: {
                    label: {
                        font: { color: 'blue' },
                        horizontalAlignment: 'center'
                    }
                }
            }
        });
    });

    verticalAlignment

    Specifies a label's position on a strip.

    Type: String
    Default Value: 'center'
    Accepted Values: 'top' | 'center' | 'bottom'

    Show Example:
    jQuery

    In the example below, the strip label's text is colored in blue and located at the top in the vertical direction.

    <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' }
            ],
            argumentAxis: {
                strips: [{
                    startValue: 2013, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }],
                stripStyle: {
                    label: {
                        font: { color: 'blue' },
                        verticalAlignment: 'top'
                    }
                }
            }
        });
    });