Strips - React Charts | React Example

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, °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, °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;

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.2.3/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; }

React Charts - Strips