DevExtreme Angular - SVG-Based Components Customization

This article describes ways to customize SVG-based UI components. For a list of SVG-based UI components, refer to Styling Methods. A similar article on HTML-based UI components is also available.

Palettes

A palette is a set of colors that mix well with each other. Palettes are used to colorize the following UI component elements:

DevExtreme supports predefined and custom palettes. The default palette is Material. This and other predefined palettes are demonstrated in the following demo:

View Demo

Apply a Palette

Every UI component that supports palettes has a palette property. It accepts the name of a predefined or registered custom palette or an array of colors. In most UI components, this property should be set on the first level of the configuration object:

HTML
TypeScript
  • <dx-pie-chart ...
  • palette="Harmony Light">
  • <!-- or custom colors -->
  • <!-- [palette]="['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69']"> -->
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

View Demo

In the CircularGauge and LinearGauge, the palette can be specified in the rangeContainer and subvalueIndicator objects.

app.component.html
app.module.ts
  • <dx-circular-gauge ...
  • [subvalues]="[25, 40, 68]">
  • <dxo-subvalue-indicator
  • palette="Soft Pastel">
  • </dxo-subvalue-indicator>
  • <dxo-range-container palette="Harmony Light">
  • <dxi-range [startValue]="0" [endValue]="30"></dxi-range>
  • <dxi-range [startValue]="30" [endValue]="70"></dxi-range>
  • <dxi-range [startValue]="70" [endValue]="100"></dxi-range>
  • </dxo-range-container>
  • </dx-circular-gauge>
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxCircularGaugeModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxCircularGaugeModule
  • ],
  • providers: [],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

View Demo

In the TreeMap, the palette is part of the colorizer. In the VectorMap, it should be set for a specific layer. In the RangeSelector, the palette is specified in the chart object.

app.component.html
app.component.ts
app.module.ts
  • <dx-tree-map ... >
  • <dxo-colorizer palette="Harmony Light"></dxo-colorizer>
  • </dx-tree-map>
  •  
  • <dx-vector-map ... >
  • <dxi-layer
  • [dataSource]="worldMap"
  • palette="Violet"
  • [paletteSize]="7"
  • [customize]="colorizeMap">
  • </dxi-layer>
  • </dx-vector-map>
  •  
  • <dx-range-selector
  • [dataSource]="[
  • { arg: 'A', val1: 1, val2: 3 },
  • { arg: 'B', val1: 5, val2: 5 },
  • { arg: 'C', val1: 10, val2: 7 }
  • ]">
  • <dxo-chart palette="Soft Pastel">
  • <dxo-common-series-settings type="bar" argumentField="arg"></dxo-common-series-settings>
  • <dxi-series value-field="val1"></dxi-series>
  • <dxi-series value-field="val2"></dxi-series>
  • </dxo-chart>
  • </dx-range-selector>
  • import { Component } from '@angular/core';
  • import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • constructor(service: Service) {
  • this.colorizeMap = this.colorizeMap.bind(this);
  • }
  •  
  • worldMap: any = mapsData.world;
  •  
  • colorizeMap(elements) {
  • elements.forEach((element, index) => {
  • element.applySettings({
  • paletteIndex: index % 7
  • });
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxTreeMapModule, DxVectorMapModule, DxRangeSelector } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTreeMapModule,
  • DxVectorMapModule,
  • DxRangeSelector
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

TreeMap Demo VectorMap Demo

Override a Palette Color

Set a UI component element's color property to override a palette color for this element:

HTML
TypeScript
  • <dx-chart ... >
  • <dxi-series color="red" ... ></dxi-series>
  • </dx-chart>
  •  
  • <dx-circular-gauge ... >
  • <dxo-range-container>
  • <!-- ... -->
  • <dxi-range color="red" ... ></dxi-range>
  • </dxo-range-container>
  • </dx-circular-gauge>
  •  
  • <dx-vector-map ... >
  • <dxi-layer ...
  • [customize]="colorizeMap">
  • </dxi-layer>
  • </dx-vector-map>
  • import {
  • DxChartModule,
  • DxCircularGaugeModule,
  • DxVectorMapModule
  • } from "devextreme-angular";
  • import * as mapsData from "devextreme-dist/js/vectormap-data/world.js";
  • // ...
  • export class AppComponent {
  • worldMap: any = mapsData.world;
  • constructor() {
  • this.colorizeMap = this.colorizeMap.bind(this);
  • }
  • colorizeMap(elements) {
  • elements.forEach((element) => {
  • element.applySettings({
  • color: "red"
  • });
  • });
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

Implement a Custom Palette

The easiest way to implement a custom palette is to assign an array of colors to the palette property (see Apply a Palette). However, this approach is only useful for a single UI component or several UI components of the same type.

In other cases, we recommend implementing a custom palette as an object of the following structure:

JavaScript
  • var myPalette = {
  • // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer
  • simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'],
  • // Applies in the CircularGauge and LinearGauge
  • indicatingSet: ['#90ba58', '#eeba69', '#a37182'],
  • // Applies in the VectorMap and TreeMap with a gradient or range colorizer
  • gradientSet: ['#78b6d9', '#eeba69']
  • };

The custom palette should be registered using the registerPalette(paletteName, palette) method:

app.component.ts
  • import { registerPalette } from "devextreme/viz/palette";
  •  
  • registerPalette("myCustomPalette", myPalette);

To apply it, assign the name used in the registration to the UI components' palette properties as shown in the Apply a Palette article.

Get a Registered Palette

Call the DevExpress.viz.getPalette(paletteName) method to get a registered predefined or custom palette. The method's description provides information about the structure of the returned object.

app.component.ts
  • import { getPalette } from "devextreme/viz/palette";
  •  
  • let palette = getPalette("Material");

Themes

Unlike CSS themes, which are collections of CSS classes, SVG themes are UI component configurations. However, all predefined CSS themes have SVG counterparts. This allows HTML- and SVG-based UI components to have a uniform appearance when they are displayed on the same page.

If you already use a predefined CSS theme on the page, a corresponding SVG theme is applied automatically. Otherwise, you need to apply the SVG theme.

You can also create custom SVG themes.

Apply a Theme

To apply an SVG theme to a single UI component, assign the theme's name to the UI component's theme property.

You can also pass the theme's name to the DevExpress.viz.currentTheme(theme) method to apply the theme to all SVG-based UI components on the page. If the UI components were created before the method call, use the DevExpress.viz.refreshTheme() method to refresh the styling settings.

app.component.ts
  • import { currentTheme, refreshTheme } from "devextreme/viz/themes";
  •  
  • currentTheme("material.blue.light");
  • refreshTheme();

Create a Custom Theme

You can define several custom SVG themes and switch between them. The following code declares a custom theme called myTheme:

JavaScript
  • var customTheme = {
  • name: 'myTheme',
  • barGauge: { /* BarGauge configuration */ },
  • bullet: { /* Bullet configuration */ },
  • chart: { /* Chart configuration */ },
  • funnel: { /* Funnel configuration */ },
  • gauge: { /* CircularGauge and LinearGauge configuration */ },
  • map: { /* VectorMap configuration */ },
  • pie: { /* PieChart configuration */ },
  • polar: { /* PolarChart configuration */ },
  • rangeSelector: { /* RangeSelector configuration */ },
  • sankey: { /* Sankey configuration */ },
  • sparkline: { /* Sparkline configuration */ },
  • treeMap: { /* TreeMap configuration */ }
  • };
NOTE
  • Particular properties cannot be used in themes. Such properties have a corresponding note in their description, for example, dataSource.

  • If you declare commonSeriesSettings properties, specify the name of the series. For instance, PieChart settings should be configured inside the pie object:

    JavaScript
    • var customTheme = {
    • name: 'myTheme',
    • pie: {
    • // ...
    • commonSeriesSettings: {
    • pie: {
    • // ...
    • }
    • }
    • }
    • };

You should use the DevExpress.viz.registerTheme(customTheme, baseTheme) method to register the custom theme. Pass the name of a predefined theme as the baseTheme argument. This theme complements the custom theme if specific properties are absent in the latter. In the following code, Generic Light is used as the base theme:

app.component.ts
  • import { registerTheme } from "devextreme/viz/themes";
  •  
  • registerTheme(customTheme, "generic.light");

Next, use the theme's name (myTheme) to apply the theme.