Angular Charts - Winloss Sparklines

This demo illustrates the sparklines of the win-loss type. In the winloss sparkline, values are represented by bars that either grow up or go down from an invisible line. This line is determined by a threshold value. If a data source value is greater than this threshold value, the bar grows up. Otherwise, it goes down.

Backend API

<div class="long-title" ><h3>Monthly Prices of Copper, Nickel and Palladium</h3></div > <div id="chart-demo"> <table class="demo-table"> <tr> <th><div class="dx-screen-reader-only">Year</div></th> <th>Copper (USD/ton)</th> <th>Nickel (USD/ton)</th> <th>Palladium (USD/troy ounce)</th> </tr> @for(year of years; track year) { <tr> <th>{{ year }}</th> <td> <dx-sparkline class="sparkline" [dataSource]="copperCosts" argumentField="month" valueField="{{ year }}" type="winloss" [showMinMax]="true" [winlossThreshold]="8000" > <dxo-sparkline-tooltip [format]="{ type: 'currency', precision: 2 }" ></dxo-sparkline-tooltip> </dx-sparkline> </td> <td> <dx-sparkline class="sparkline" [dataSource]="nickelCosts" argumentField="month" valueField="{{ year }}" type="winloss" [showMinMax]="true" [showFirstLast]="false" winColor="#6babac" lossColor="#8076bb" [winlossThreshold]="19000" > <dxo-sparkline-tooltip [format]="{ type: 'currency', precision: 2 }" ></dxo-sparkline-tooltip> </dx-sparkline> </td> <td> <dx-sparkline class="sparkline" [dataSource]="palladiumCosts" argumentField="month" valueField="{{ year }}" type="winloss" winColor="#7e4452" lossColor="#ebdd8f" firstLastColor="#e55253" [winlossThreshold]="2000" > <dxo-sparkline-tooltip [format]="{ type: 'currency', precision: 2 }" ></dxo-sparkline-tooltip> </dx-sparkline> </td> </tr> } </table> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxSparklineModule } from 'devextreme-angular'; import { CostInfo, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxSparklineModule, ], }) export class AppComponent { copperCosts: CostInfo[]; nickelCosts: CostInfo[]; palladiumCosts: CostInfo[]; years: number[]; constructor(service: Service) { this.copperCosts = service.getCopperCosts(); this.nickelCosts = service.getNickelCosts(); this.palladiumCosts = service.getPalladiumCosts(); this.years = [2021, 2022, 2023]; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart-demo { height: 440px; } ::ng-deep .demo-table { width: 100%; border: 1px solid #c2c2c2; border-collapse: collapse; } ::ng-deep .demo-table th, ::ng-deep .demo-table td { font-weight: 400; width: 200px; padding: 25px 10px 5px; border: 1px solid #c2c2c2; } ::ng-deep .demo-table th { padding: 25px 15px 20px; border: 1px solid #c2c2c2; } ::ng-deep .demo-table tr:nth-child(2) td { border-top: 1px solid #c2c2c2; } ::ng-deep .demo-table td:first-of-type { border-left: 1px solid #c2c2c2; } ::ng-deep .demo-table .sparkline { width: 200px; height: 30px; } ::ng-deep .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; margin-top: 0; }

import { Injectable } from '@angular/core'; export class CostInfo { month: number; 2021: number; 2022: number; 2023: number; } const copperCosts: CostInfo[] = [{ month: 1, 2021: 7970.50, 2022: 9775.93, 2023: 8999.79, }, { month: 2, 2021: 8460.25, 2022: 9941.35, 2023: 8955.20, }, { month: 3, 2021: 9004.98, 2022: 10237.59, 2023: 8835.72, }, { month: 4, 2021: 9335.55, 2022: 10183.13, 2023: 8814.00, }, { month: 5, 2021: 10183.97, 2022: 9362.81, 2023: 8234.28, }, { month: 6, 2021: 9612.43, 2022: 9033.13, 2023: 8386.23, }, { month: 7, 2021: 9433.59, 2022: 7529.79, 2023: 8445.26, }, { month: 8, 2021: 9357.19, 2022: 7960.98, 2023: 8351.77, }, { month: 9, 2021: 9324.07, 2022: 7734.70, 2023: 8270.86, }, { month: 10, 2021: 9778.50, 2022: 7621.21, 2023: 7939.66, }, { month: 11, 2021: 9765.48, 2022: 8029.95, 2023: 8173.95, }, { month: 12, 2021: 9550.31, 2022: 8367.23, 2023: 8394.11, }]; const nickelCosts: CostInfo[] = [{ month: 1, 2021: 17847.68, 2022: 22355.40, 2023: 28194.61, }, { month: 2, 2021: 18595.30, 2022: 24015.55, 2023: 26727.95, }, { month: 3, 2021: 16460.83, 2022: 33924.18, 2023: 23288.61, }, { month: 4, 2021: 16480.91, 2022: 33132.74, 2023: 23894.56, }, { month: 5, 2021: 17552.45, 2022: 28062.55, 2023: 21970.39, }, { month: 6, 2021: 17942.32, 2022: 25658.63, 2023: 21233.28, }, { month: 7, 2021: 18819.36, 2022: 21481.89, 2023: 21091.26, }, { month: 8, 2021: 19160.23, 2022: 22057.39, 2023: 20438.65, }, { month: 9, 2021: 19398.23, 2022: 22773.97, 2023: 19644.64, }, { month: 10, 2021: 19420.52, 2022: 22032.89, 2023: 18281.23, }, { month: 11, 2021: 19970.43, 2022: 25562.70, 2023: 17027.36, }, { month: 12, 2021: 20015.55, 2022: 28946.81, 2023: 16460.84, }]; const palladiumCosts: CostInfo[] = [{ month: 1, 2021: 2391.20, 2022: 2030.86, 2023: 1734.27, }, { month: 2, 2021: 2342.33, 2022: 2350.10, 2023: 1543.90, }, { month: 3, 2021: 2525.61, 2022: 2582.78, 2023: 1426.00, }, { month: 4, 2021: 2776.45, 2022: 2330.67, 2023: 1508.00, }, { month: 5, 2021: 2900.52, 2022: 2060.05, 2023: 1482.61, }, { month: 6, 2021: 2752.48, 2022: 1913.05, 2023: 1348.09, }, { month: 7, 2021: 2754.76, 2022: 1973.10, 2023: 1264.48, }, { month: 8, 2021: 2544.73, 2022: 2135.52, 2023: 1247.30, }, { month: 9, 2021: 2130.32, 2022: 2113.95, 2023: 1239.29, }, { month: 10, 2021: 2058.48, 2022: 2078.86, 2023: 1142.09, }, { month: 11, 2021: 2036.32, 2022: 1911.55, 2023: 1050.27, }, { month: 12, 2021: 1810.52, 2022: 1808.36, 2023: 1087.76, }]; @Injectable() export class Service { getCopperCosts(): CostInfo[] { return copperCosts; } getNickelCosts(): CostInfo[] { return nickelCosts; } getPalladiumCosts(): CostInfo[] { return palladiumCosts; } }

<!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>