All docs
V19.1
20.2 (CTP)
20.1
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Colorize Nodes and Links

Nodes are painted in different colors using a palette. You can apply a DevExtreme palette or create a custom palette.

When the palette does not have enough colors to paint each node differently, it is extended in one of the palette extension modes. The following code shows how to specify the palette and its extension mode:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        palette: "Bright",
        // or a custom palette
        // palette: ["#70c92f", "#f8ca00", "#bd1550"],
        paletteExtensionMode: "alternate"
    });
});
Angular
HTML
TypeScript
<dx-sankey ...
    paletteExtensionMode="alternate"
    palette="Bright">
    <!-- or a custom palette -->
    <!-- [palette]="['#70c92f', '#f8ca00', '#bd1550']"> -->
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

Links also support several colorization modes. They can inherit the color from the source or target node or use a gradient between those two colors:

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        link: {
            colorMode: "source" // or "target" | "gradient"
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-link
        colorMode="source"> <!-- or "target" | "gradient" -->
    </dxo-link>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

To colorize nodes or links uniformly, specify the color using the node.color or link.color option. Note that the links' colorMode option should be "none" (which is its default value):

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        node: {
            color: "blue"
        },
        link: {
            color: "green"
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-node color="blue"></dxo-node>
    <dxo-link color="green"></dxo-link>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

Below is a demo in which you can choose different predefined palettes, palette extension modes, and link colorization modes:

See Also