Angular Charts - Strips

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart'; import { Service, Temperature } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } const customizeText: DxChartTypes.ArgumentAxisLabel['customizeText'] = ({ valueText }) => `${valueText}&#176F`; @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxChartModule, ], }) 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: DxChartTypes.Properties['customizePoint'] = ({ value }) => { if (value > this.highAverage) { return { color: this.highAverageColor }; } if (value < this.lowAverage) { return { color: this.lowAverageColor }; } return null; }; customizeLabel: DxChartTypes.Properties['customizeLabel'] = ({ value }) => { if (value > this.highAverage) { return getLabelsSettings(this.highAverageColor); } if (value < this.lowAverage) { return getLabelsSettings(this.lowAverageColor); } return null; }; customizeText = customizeText; } function getLabelsSettings(backgroundColor: string) { return { visible: true, backgroundColor, customizeText, }; } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::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, }; } }

<!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/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>