DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - Strips

DevExtreme Chart can display background strips to better highlight a range of values.

To configure strips, declare an array of objects in the argumentAxis.strips[] or valueAxis.strips[] property. Each object in this array configures an individual strip. The startValue and endValue properties define the highlighted range.

This demo shows two value axis strips. The code configures label text and font.color properties for each strip.

Backend API
import React from 'react'; import { Chart, Series, Strip, StripStyle, Legend, ValueAxis, Label, Font, Export, } from 'devextreme-react/chart'; import { temperaturesData, lowAverage, highAverage } from './data.ts'; const highAverageColor = '#ff9b52'; const lowAverageColor = '#6199e6'; function customizePoint(arg: { value: number; }) { if (arg.value > highAverage) { return { color: highAverageColor }; } if (arg.value < lowAverage) { return { color: lowAverageColor }; } return null; } function customizeLabel(arg: { value: number; }) { if (arg.value > highAverage) { return getLabelsSettings(highAverageColor); } if (arg.value < lowAverage) { return getLabelsSettings(lowAverageColor); } return null; } function getLabelsSettings(backgroundColor: string) { return { visible: true, backgroundColor, customizeText, }; } function customizeText(arg: { valueText: string; }) { return `${arg.valueText}&#176F`; } function App() { return ( <Chart id="chart" title="Temperature (high) in September, &#176;F" dataSource={temperaturesData} customizePoint={customizePoint} customizeLabel={customizeLabel} > <Series argumentField="day" valueField="temperature" type="spline" color="#a3aaaa" /> <ValueAxis> <Label customizeText={customizeText} /> <Strip startValue={highAverage} color="rgba(255,155,85,0.15)"> <Label text="Above average high"> <Font color={highAverageColor} /> </Label> </Strip> <Strip endValue={lowAverage} color="rgba(97,153,230,0.10)"> <Label text="Below average low"> <Font color={lowAverageColor} /> </Label> </Strip> <StripStyle> <Label> <Font weight={500} size="14" /> </Label> </StripStyle> </ValueAxis> <Legend visible={false} /> <Export enabled /> </Chart> ); } export default App;
import React from 'react'; import { Chart, Series, Strip, StripStyle, Legend, ValueAxis, Label, Font, Export, } from 'devextreme-react/chart'; import { temperaturesData, lowAverage, highAverage } from './data.js'; const highAverageColor = '#ff9b52'; const lowAverageColor = '#6199e6'; function customizePoint(arg) { if (arg.value > highAverage) { return { color: highAverageColor }; } if (arg.value < lowAverage) { return { color: lowAverageColor }; } return null; } function customizeLabel(arg) { if (arg.value > highAverage) { return getLabelsSettings(highAverageColor); } if (arg.value < lowAverage) { return getLabelsSettings(lowAverageColor); } return null; } function getLabelsSettings(backgroundColor) { return { visible: true, backgroundColor, customizeText, }; } function customizeText(arg) { return `${arg.valueText}&#176F`; } function App() { return ( <Chart id="chart" title="Temperature (high) in September, &#176;F" dataSource={temperaturesData} customizePoint={customizePoint} customizeLabel={customizeLabel} > <Series argumentField="day" valueField="temperature" type="spline" color="#a3aaaa" /> <ValueAxis> <Label customizeText={customizeText} /> <Strip startValue={highAverage} color="rgba(255,155,85,0.15)" > <Label text="Above average high"> <Font color={highAverageColor} /> </Label> </Strip> <Strip endValue={lowAverage} color="rgba(97,153,230,0.10)" > <Label text="Below average low"> <Font color={lowAverageColor} /> </Label> </Strip> <StripStyle> <Label> <Font weight={500} size="14" /> </Label> </StripStyle> </ValueAxis> <Legend visible={false} /> <Export enabled /> </Chart> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const temperaturesData = [ { temperature: 52, day: '1' }, { temperature: 57, day: '2' }, { temperature: 58, day: '3' }, { temperature: 56, day: '4' }, { temperature: 59, day: '5' }, { temperature: 59, day: '6' }, { temperature: 56, day: '7' }, { temperature: 62, day: '8' }, { temperature: 57, day: '9' }, { temperature: 54, day: '10' }, { temperature: 52, day: '11' }, { temperature: 58, day: '12' }, { temperature: 53, day: '13' }, { temperature: 54, day: '14' }, { temperature: 57, day: '15' }, { temperature: 61, day: '16' }, { temperature: 58, day: '17' }, { temperature: 63, day: '18' }, { temperature: 64, day: '19' }, { temperature: 52, day: '20' }, ]; export const highAverage = 60.8; export const lowAverage = 53;
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const temperaturesData = [ { temperature: 52, day: '1' }, { temperature: 57, day: '2' }, { temperature: 58, day: '3' }, { temperature: 56, day: '4' }, { temperature: 59, day: '5' }, { temperature: 59, day: '6' }, { temperature: 56, day: '7' }, { temperature: 62, day: '8' }, { temperature: 57, day: '9' }, { temperature: 54, day: '10' }, { temperature: 52, day: '11' }, { temperature: 58, day: '12' }, { temperature: 53, day: '13' }, { temperature: 54, day: '14' }, { temperature: 57, day: '15' }, { temperature: 61, day: '16' }, { temperature: 58, day: '17' }, { temperature: 63, day: '18' }, { temperature: 64, day: '19' }, { temperature: 52, day: '20' }, ]; export const highAverage = 60.8; export const lowAverage = 53;
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart { height: 440px; }

You can specify the same appearance for all strips on a specific axis or in the Chart. To specify the same appearance, declare the stripStyle object in the valueAxis, argumentAxis, or commonAxisSettings object. Individual settings override common settings. In this example, we used the stripStyle object to specify the font weight and size for all strip labels on the value axis.