commonAxisSettings stripStyle

Configures the appearance of strips.

Type: Object

DevExtreme HTML5 Charts Strips

The commonAxisSettings | stripStyle object specifies common settings for all strips in the chart. To configure only those strips that belong to a particular axis, use the following objects.

To configure individual strips, use the following arrays of objects.

Individual settings override axis-specific settings which, in their turn, override common settings.

Show Example:
AngularJS
Knockout
jQuery

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

<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 strips.

<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 strips.

<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' }
            }]
        }
    });
});

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' }
            }]
        }
    });
});

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.