DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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