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

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 properties of the strips, visit the strips section of the API reference.

See Also