All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Strips

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 JavaScript Charts Strips

To configure the strips, declare the strips array in the argumentAxis or valueAxis object. This array should contain objects, and each of them 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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            strips: [
                { startValue: 100, endValue: 150, color: 'yellow' },
                { startValue: 50, endValue: 70, color: 'orange' }
            ]
        },
        valueAxis: {
            strips: [
                { startValue: 40, endValue: 50, color: 'blue' },
                // This strip extends from 70 up to the chart's end
                { startValue: 70, color: 'red' }
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis>
        <dxi-strip [startValue]="100" [endValue]="150" color="yellow"></dxi-strip>
        <dxi-strip [startValue]="50" [endValue]="70" color="orange"></dxi-strip>
    </dxo-argument-axis>
    <dxi-value-axis>
        <dxi-strip [startValue]="40" [endValue]="50" color="blue"></dxi-strip>
        <dxi-strip [startValue]="70" color="red"></dxi-strip>
    </dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis ... >
            <DxStrip :start-value="100" :end-value="150" color="yellow"/>
            <DxStrip :start-value="50" :end-value="70" color="orange"/>
        </DxArgumentAxis>
        <DxValueAxis ... >
            <DxStrip :start-value="40" :end-value="50" color="blue"/>
            <DxStrip :start-value="70" color="red"/>
        </DxValueAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxValueAxis,
    DxStrip
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxValueAxis,
        DxStrip
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    ArgumentAxis,
    ValueAxis,
    Strip
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis ... >
                    <Strip startValue={100} endValue={150} color="yellow" />
                    <Strip startValue={50} endValue={70} color="orange" />
                </ArgumentAxis>
                <ValueAxis ... >
                    <Strip startValue={40} endValue={50} color="blue" />
                    <Strip startValue={70} color="red" />
                </ValueAxis>
            </Chart>
        );
    }
}

export default App;

If several strips should have a uniform style, you can specify it using one of the following objects.

  • argumentAxis.stripStyle
    Style for strips belonging to the argument axis.

  • valueAxis.stripStyle
    Style for strips belonging to the value axis.

  • commonAxisSettings.stripStyle
    Style for all strips in the Chart.

Note that individual settings override axis-specific settings which, in turn, override common settings.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            strips: [
                // high priority
            ],
            stripStyle: {
                // middle priority
            }
        },
        valueAxis: {
            strips: [
                // high priority
            ],
            stripStyle: {
                // middle priority
            }
        },
        commonAxisSettings: {
            stripStyle: {
                // low priority
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-argument-axis>
        <dxi-strip ... >
            <!-- high priority -->
        </dxi-strip>
        <dxo-strip-style ... >
            <!-- middle priority -->
        </dxo-strip-style>
    </dxo-argument-axis>
    <dxi-value-axis>
        <dxi-strip ... >
            <!-- high priority -->
        </dxi-strip>
        <dxo-strip-style ... >
            <!-- middle priority -->
        </dxo-strip-style>
    </dxi-value-axis>
    <dxo-common-axis-settings>
        <dxo-strip-style ... >
            <!-- low priority -->
        </dxo-strip-style>
    </dxo-common-axis-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis ... >
            <DxStrip ... >
                <!-- high priority -->
            </DxStrip>
            <DxStripStyle ... >
                <!-- middle priority -->
            </DxStripStyle>
        </DxArgumentAxis>
        <DxValueAxis ... >
            <DxStrip ... >
                <!-- high priority -->
            </DxStrip>
            <DxStripStyle ... >
                <!-- middle priority -->
            </DxStripStyle>
        </DxValueAxis>
        <DxCommonAxisSettings>
            <DxStripStyle ... >
                <!-- low priority -->
            </DxStripStyle>
        </DxCommonAxisSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonAxisSettings,
    DxArgumentAxis,
    DxValueAxis,
    DxStrip,
    DxStripStyle
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonAxisSettings,
        DxArgumentAxis,
        DxValueAxis,
        DxStrip,
        DxStripStyle
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    CommonAxisSettings,
    ArgumentAxis,
    ValueAxis,
    Strip,
    StripStyle
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis ... >
                    <Strip ... >
                        {/* high priority */}
                    </Strip>
                    <StripStyle ... >
                        {/* middle priority */}
                    </StripStyle>
                </ArgumentAxis>
                <ValueAxis ... >
                    <Strip ... >
                        {/* high priority */}
                    </Strip>
                    <StripStyle ... >
                        {/* middle priority */}
                    </StripStyle>
                </ValueAxis>
                <CommonAxisSettings>
                    <StripStyle ... >
                        {/* low priority */}
                    </StripStyle>
                </CommonAxisSettings>
            </Chart>
        );
    }
}

export default App;

For information about all options of the strips, visit the strips section of the API reference.

See Also