Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
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}°F`;
}
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;
xxxxxxxxxx
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}°F`;
}
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;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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;
xxxxxxxxxx
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,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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/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.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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;
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#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.