Angular Charts - Legend Markers Customization

Legend markers are SVG elements. To customize a legend marker, declare the SVG markup in the markerTemplate. You can access the legend item data object inside the template and use it to identify the series and read its parameters.

In this demo, the markers' appearance changes when you click the markers to show or hide the corresponding series.

Backend API

<dx-chart id="chart" [dataSource]="dataSource" (onLegendClick)="onLegendClick($event)" > <dxo-chart-title text="Noisy and Original Signals"> </dxo-chart-title> <dxo-chart-common-series-settings argumentField="argument"> <dxo-chart-point [visible]="false"></dxo-chart-point> </dxo-chart-common-series-settings> <dxi-chart-series valueField="originalValue" name="Original Signal"> </dxi-chart-series> <dxi-chart-series valueField="value" name="Noisy Signal"> </dxi-chart-series> <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center" markerTemplate="markerTemplate" > <svg *dxTemplate="let item of 'markerTemplate'" attr.fill="{{ getMarkerColor(item) }}" > <rect x="0" y="0" width="18" height="18" opacity="0.3" attr.fill="getMarkerColor(item)" ></rect> <path attr.d="{{ getMarkerPath(item.series.name) }}"></path> </svg> </dxo-chart-legend> </dx-chart>

import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { DxChartModule } from 'devextreme-angular'; import { Data, 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: [DxChartModule], }) export class AppComponent { dataSource: Data[]; markerPath = { 'Original Signal': 'M 0 8 C 2 4 7 4 9.5 8 C 11 12 16 12 18 8 L 18 10 C 16 14 11 14 8.5 10 C 7 6 2 6 0 10 Z', 'Noisy Signal': 'M 18 8 L 12 12 L 7 3 L 0 7.4 L 0 10 L 6 6 L 11 15 L 18 10.6 Z', }; constructor(service: Service) { this.dataSource = service.getData(); } getMarkerPath(name) { return this.markerPath[name]; } getMarkerColor(item) { return item.series.isVisible() ? item.marker.fill : '#888'; } onLegendClick(e) { e.target.isVisible() ? e.target.hide() : e.target.show(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart { height: 440px; }

import { Injectable } from '@angular/core'; export class Data { value: number; originalValue: number; argument: number; } function generateData(start: number, end: number, step: number) { const data: Data[] = []; for (let i = start; i < end; i += step) { const originalValue = Math.sin(i) / i; data.push({ value: originalValue + ((0.5 - Math.random()) / 10), originalValue, argument: i }); } return data; } @Injectable() export class Service { getData(): Data[] { return generateData(2.5, 12, 0.1); } }

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