stripStyle label

    Configures the appearance of strip labels.

    Type: Object
    See Also
    • argumentAxis | strips[] - declares a collection of strips belonging to the argument axis.
    • valueAxis | strips[] - declares a collection of strips belonging to the value axis.
    • argumentAxis | strips[] | label | text - specifies the label of a strip belonging to the argument axis.
    • valueAxis | strips[] | label | text - specifies the label of a strip belonging to the value axis.
    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can see the default appearance of strip labels.

    <div ng-controller="chartController">
        <div style="height:500px; max-width:800px; margin:0 auto" dx-chart="chartOptions"></div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    angular
        .module('myApp', ['dx'])
        .controller('chartController', function ($scope) {
            $scope.chartOptions = {
                dataSource: population,
                commonSeriesSettings: {
                    argumentField: 'year'
                },
                series: [
                    { valueField: 'europe', name: 'Europe' },
                    { valueField: 'americas', name: 'Americas' },
                    { valueField: 'africa', name: 'Africa' }
                ],
                valueAxis: {
                    label: { format: 'largeNumber' },
                    strips: [{
                        startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                        label: { text: 'Lowest' }
                    }, {
                        startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                        label: { text: 'Highest' }
                    }]
                },
                argumentAxis: {
                    strips: [{
                        startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                        label: { text: 'Forecast' }
                    }]
                }
            }
        });
    
    angular.element(document).ready(function () {
       angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can see the default appearance of strip labels.

    <div style="height:500px; max-width:800px; margin:0 auto" data-bind="dxChart: chartOptions"></div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    var viewModel = {
        chartOptions: {
            dataSource: population,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            }
        }
    };
    
    ko.applyBindings(viewModel);
    

    In this example, you can see the default appearance of strip labels.

    <div id="chartContainer" style="height:500px; max-width:800px; margin:0 auto"></div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: population,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            }
        });
    });
    

    font

    Specifies font options for strip labels.

    Type: Object

    horizontalAlignment

    Aligns strip labels in the horizontal direction.

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

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can relocate strip labels using the select box under the chart.

    <div ng-controller="chartController">
        <div id="chartContainer" dx-chart="{
            dataSource: data,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            animation: false,
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
                }, {
                    startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            },
            commonAxisSettings: {
                stripStyle: {
                    label: { horizontalAlignment: 'left' }
                }
            },
            bindingOptions: {
                'commonAxisSettings.stripStyle.label.horizontalAlignment': 'selectBoxValue'
            }
        }"></div>
        <div class="inline" style="text-align:center">
            <div>commonAxisSettings | stripStyle | label | horizontalAlignment:&nbsp;</div>
            <div id="selectBoxContainer" ng-model="selectBoxValue" dx-select-box="{
                items: ['left', 'right', 'center']
            }"></div>
        </div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    angular
        .module('myApp', ['dx'])
        .controller('chartController', function ($scope) {
            $scope.data = population;
            $scope.selectBoxValue = 'left'
        });
    
    angular.element(document).ready(function () {
       angular.bootstrap(document, ['myApp']);
    });
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }

    In this example, you can relocate strip labels using the select box under the chart.

    <div id="chartContainer" data-bind="dxChart: {
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: {
            label: { format: 'largeNumber' },
            strips: [{
                startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Lowest' }
            }, {
                startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
            }, {
                startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Highest' }
            }]
        },
        argumentAxis: {
            strips: [{
                startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Forecast' }
            }]
        },
        commonAxisSettings: {
            stripStyle: {
                label: { horizontalAlignment: selectBoxValue }
            }
        }
    }"></div>
    <div class="inline" style="text-align:center">
        <div>commonAxisSettings | stripStyle | label | horizontalAlignment:&nbsp;</div>
        <div id="selectBoxContainer" data-bind="dxSelectBox: {
            items: ['left', 'right', 'center'],
            value: selectBoxValue
        }"></div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    var viewModel = {
        data: population,
        selectBoxValue: ko.observable('left')
    };
    
    ko.applyBindings(viewModel);
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }

    In this example, you can relocate strip labels using the select box under the chart.

    <div id="chartContainer"></div>
    <div class="inline" style="text-align:center">
        <div>commonAxisSettings | stripStyle | label | horizontalAlignment:&nbsp;</div>
        <div id="selectBoxContainer"></div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    $(function () {
        var chart = $("#chartContainer").dxChart({
            dataSource: population,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            animation: false,
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 200000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
                }, {
                    startValue: 1900000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            },
            commonAxisSettings: {
                stripStyle: {
                    label: { horizontalAlignment: 'left' }
                }
            }
        }).dxChart('instance');
    
        $("#selectBoxContainer").dxSelectBox({
            items: ['left', 'right', 'center'],
            value: 'left',
            onValueChanged: function (e) {
                chart.option('commonAxisSettings.stripStyle.label.horizontalAlignment', e.value);
            }
        });
    });
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }

    verticalAlignment

    Aligns strip labels in the vertical direction.

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

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can relocate strip labels using the select box under the chart.

    <div ng-controller="chartController">
        <div id="chartContainer" dx-chart="{
            dataSource: data,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            animation: false,
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 100000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
                }, {
                    startValue: 1800000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            },
            commonAxisSettings: {
                stripStyle: {
                    label: { verticalAlignment: 'top' }
                }
            },
            bindingOptions: {
                'commonAxisSettings.stripStyle.label.verticalAlignment': 'selectBoxValue'
            }
        }"></div>
        <div class="inline" style="text-align:center">
            <div>commonAxisSettings | stripStyle | label | verticalAlignment:&nbsp;</div>
            <div id="selectBoxContainer" ng-model="selectBoxValue" dx-select-box="{
                items: ['top', 'center', 'bottom']
            }"></div>
        </div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    angular
        .module('myApp', ['dx'])
        .controller('chartController', function ($scope) {
            $scope.data = population;
            $scope.selectBoxValue = 'top'
        });
    
    angular.element(document).ready(function () {
       angular.bootstrap(document, ['myApp']);
    });
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }

    In this example, you can relocate strip labels using the select box under the chart.

    <div id="chartContainer" data-bind="dxChart: {
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: {
            label: { format: 'largeNumber' },
            strips: [{
                startValue: 100000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Lowest' }
            }, {
                startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
            }, {
                startValue: 1800000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Highest' }
            }]
        },
        argumentAxis: {
            strips: [{
                startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Forecast' }
            }]
        },
        commonAxisSettings: {
            stripStyle: {
                label: { verticalAlignment: selectBoxValue }
            }
        }
    }"></div>
    <div class="inline" style="text-align:center">
        <div>commonAxisSettings | stripStyle | label | verticalAlignment:&nbsp;</div>
        <div id="selectBoxContainer" data-bind="dxSelectBox: {
            items: ['top', 'center', 'bottom'],
            value: selectBoxValue
        }"></div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    var viewModel = {
        data: population,
        selectBoxValue: ko.observable('top')
    };
    
    ko.applyBindings(viewModel);
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }

    In this example, you can relocate strip labels using the select box under the chart.

    <div id="chartContainer"></div>
    <div class="inline" style="text-align:center">
        <div>commonAxisSettings | stripStyle | label | verticalAlignment:&nbsp;</div>
        <div id="selectBoxContainer"></div>
    </div>
    
    var population = [
        { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
        { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
        { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
        { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
        { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
        { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
        { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 },
        { year: 2020, europe: 721000000, americas: 1027000000, africa: 1189000000 },
        { year: 2030, europe: 704000000, americas: 1110000000, africa: 1416000000 },
        { year: 2040, europe: 680000000, americas: 1178000000, africa: 1665000000 },
        { year: 2050, europe: 650000000, americas: 1231000000, africa: 1937000000 }
    ];
    
    $(function () {
        var chart = $("#chartContainer").dxChart({
            dataSource: population,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            animation: false,
            valueAxis: {
                label: { format: 'largeNumber' },
                strips: [{
                    startValue: 100000000, endValue: 250000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                }, {
                    startValue: 700000000, endValue: 900000000, color: 'rgba(68, 100, 213, 0.2)'
                }, {
                    startValue: 1800000000, endValue: 2000000000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }]
            },
            argumentAxis: {
                strips: [{
                    startValue: 2016, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Forecast' }
                }]
            },
            commonAxisSettings: {
                stripStyle: {
                    label: { verticalAlignment: 'top' }
                }
            }
        }).dxChart('instance');
    
        $("#selectBoxContainer").dxSelectBox({
            items: ['top', 'center', 'bottom'],
            value: 'top',
            onValueChanged: function (e) {
                chart.option('commonAxisSettings.stripStyle.label.verticalAlignment', e.value);
            }
        });
    });
    
    #chartContainer {
        height: 500px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #selectBoxContainer {
        height: 35px;
        max-width: 200px;
        margin-top: 5px;
        vertical-align: middle;
    }
    
    .inline > div {
        display: inline-block;
    }