Strips
Documentation
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.
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.
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.
<dx-chart
id="chart"
[dataSource]="temperaturesData"
title="Temperature in September"
[customizePoint]="customizePoint"
[customizeLabel]="customizeLabel"
>
<dxi-series
argumentField="day"
valueField="temperature"
type="spline"
color="#a3aaaa"
></dxi-series>
<dxi-value-axis>
<dxo-label [customizeText]="customizeText"></dxo-label>
<dxi-strip [startValue]="highAverage" color="rgba(255,155,85,0.15)">
<dxo-label text="Above average">
<dxo-font [color]="highAverageColor"></dxo-font>
</dxo-label>
</dxi-strip>
<dxi-strip [endValue]="lowAverage" color="rgba(97,153,230,0.10)">
<dxo-label text="Below average">
<dxo-font [color]="lowAverageColor"></dxo-font>
</dxo-label>
</dxi-strip>
<dxo-strip-style>
<dxo-label>
<dxo-font weight="500" size="14"></dxo-font>
</dxo-label>
</dxo-strip-style>
</dxi-value-axis>
<dxo-legend [visible]="false"></dxo-legend>
<dxo-export [enabled]="true"></dxo-export>
</dx-chart>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule } from 'devextreme-angular';
import { Service, Temperature } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
})
export class AppComponent {
highAverageColor = '#ff9b52';
lowAverageColor = '#6199e6';
highAverage: number;
lowAverage: number;
temperaturesData: Temperature[];
constructor(service: Service) {
this.temperaturesData = service.getTemperaturesData();
const { highAverage, lowAverage } = service.getRangeOfAverageTemperature();
this.highAverage = highAverage;
this.lowAverage = lowAverage;
}
customizePoint = (arg: any) => {
if (arg.value > this.highAverage) {
return { color: this.highAverageColor };
} if (arg.value < this.lowAverage) {
return { color: this.lowAverageColor };
}
};
customizeLabel = (arg: any) => {
if (arg.value > this.highAverage) {
return getLabelsSettings(this.highAverageColor);
} if (arg.value < this.lowAverage) {
return getLabelsSettings(this.lowAverageColor);
}
};
customizeText = customizeText;
}
function getLabelsSettings(backgroundColor: any) {
return {
visible: true,
backgroundColor,
customizeText,
};
}
function customizeText(arg: any) {
return `${arg.valueText}°F`;
}
@NgModule({
imports: [
BrowserModule,
DxChartModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart {
height: 440px;
}
import { Injectable } from '@angular/core';
export class Temperature {
day: string;
temperature: number;
}
const temperaturesData : Temperature[] = [
{ 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' },
];
@Injectable()
export class Service {
getTemperaturesData(): Temperature[] {
return temperaturesData;
}
getRangeOfAverageTemperature() {
return {
highAverage: 60.8,
lowAverage: 53,
};
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.16',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16',
'@angular/forms': 'npm:@angular/forms@12.2.16',
'@angular/common': 'npm:@angular/common@12.2.16',
'@angular/compiler': 'npm:@angular/compiler@12.2.16',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.1.3/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@22.1.3/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.57',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.30',
'devextreme-angular': 'npm:devextreme-angular@22.1.3',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.7',
'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.7/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.16/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@22.1.3/*/package.json',
'npm:devextreme-angular@22.1.3/ui/*/package.json',
'npm:devextreme-angular@22.1.3/package.json',
'npm:devexpress-diagram@2.1.57/package.json',
'npm:devexpress-gantt@4.1.30/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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/22.1.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>