argumentAxis strips[]

Specifies options for argument axis strips.

Type: Array
Cannot be used in themes.

Strips are the highlighted areas in a chart within the defined range of values (minimum and maximum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series to trace whether the series points' values fall in or out of that range. For more details on strips, refer to the Strips topic.

To define strips for the argument axis, use the strips array. When a strip's startValue, endValue and color properties are specified, the strip is displayed in a chart. In addition, you can show a label with descriptive information on a strip. To set the text for a label, use the strip's label object.

If you need to set similar values for all strips of all axes, use the commonAxisSettings | stripStyle configuration object. It exposes the properties that can be specified for strips of all axes at once. Note that the values specified for the argument axis individually (in the argumentAxis | strips object) override the values that are specified for all axes (in the commonAxisSettings | stripStyle object).

Show Example:
jQuery

In this example, the argument 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").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            strips: [
                { startValue: 1960, endValue: 1970, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 1980, endValue: 1990, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2000, endValue: 2010, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2020, endValue: 2030, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 2040, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)' }
            ]
        }
    });
});

color

Specifies a color for a strip.

Type: String
Default Value: undefined

This option supports the following colors.

Show Example:
jQuery

In this example, the argument axis strips are drawn in various colors.

<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").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            strips: [
                { startValue: 1960, endValue: 1970, color: 'rgba(68, 100, 213, 0.2)' },
                { startValue: 1980, endValue: 1990, color: 'rgba(175, 238, 238, 1)' },
                { startValue: 2000, endValue: 2010, color: 'rgba(64, 224, 208, 1)' },
                { startValue: 2020, endValue: 2030, color: 'rgba(255, 239, 213, 1)' },
                { startValue: 2040, endValue: 2050, color: 'rgba(135, 206, 235, 1)' }
            ]
        }
    });
});

endValue

Specifies an end value for a strip.

Default Value: undefined

label

An object that defines the label configuration options of a strip.

Type: Object

A strip label represents descriptive information on a strip. It often represents a strip's title. To set label options for an individual strip, define the label object. If you need to set similar values for labels in all strips, use the commonAxisSettings | stripStyle | label configuration object. It exposes the properties that can be specified for labels on all strips simultaneously. Note that the values specified for a strip individually (in the argumentAxis | strips | strip | label object) override the values that are specified for all axes (in the commonAxisSettings | stripStyle | label object).

Show Example:
jQuery

In the following example, the argument axis' strip has a label.

<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").dxPolarChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            type: 'line'
        },
        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' }
                }
            ]
        }
    });
});

startValue

Specifies a start value for a strip.

Default Value: undefined