Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Strips
Documentation
The Chart can display background strips that highlight value ranges.
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's text and font.color properties for each strip.
You can specify the same appearance for all strips on a specific axis or in the Chart. To do this, declare the stripStyle object in the valueAxis, argumentAxis, or commonAxisSettings object. Individual settings override common settings. In this demo, we use the stripStyle object to specify the font weight and size for all strip labels on the value axis.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
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 };
} else if (arg.value < lowAverage) {
return { color: lowAverageColor };
}
}
function customizeLabel(arg) {
if (arg.value > highAverage) {
return getLabelsSettings(highAverageColor);
} else if (arg.value < lowAverage) {
return getLabelsSettings(lowAverageColor);
}
}
function getLabelsSettings(backgroundColor) {
return {
visible: true,
backgroundColor: backgroundColor,
customizeText
};
}
function customizeText(arg) {
return `${arg.valueText}°F`;
}
export default function App() {
return (
<Chart
id="chart"
title="Temperature in September"
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">
<Font color={highAverageColor} />
</Label>
</Strip>
<Strip endValue={lowAverage} color="rgba(97,153,230,0.10)">
<Label text="Below average">
<Font color={lowAverageColor} />
</Label>
</Strip>
<StripStyle>
<Label>
<Font weight="500" size="14" />
</Label>
</StripStyle>
</ValueAxis>
<Legend visible={false} />
<Export enabled />
</Chart>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/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.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
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;
System.config({
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16.14.0/umd/react.development.js',
'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.7.2/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'devextreme-react': 'npm:devextreme-react@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js',
// 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'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});