Vue Chart - 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.
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 properties. 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 property is also necessary for a strip to be displayed.
- <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>
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.
- <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>
For information about all properties of the strips, visit the strips section of the API reference.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.