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.

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

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>

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.

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>

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

See Also