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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey
        palette-extension-mode="alternate"
        palette="Bright" />
        <!-- or a custom palette -->
        <!-- :palette="['#70c92f', '#f8ca00', '#bd1550']" -->
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey
                paletteExtensionMode="alternate"
                palette="Bright" />
                {/* or a custom palette */}
                {/* palette={['#70c92f', '#f8ca00', '#bd1550']} */}
        )
    }
}

export default App;

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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxLink color-mode="source" /> <!-- or "target" | "gradient" -->
    </DxSankey>
</template>

<script>
import DxSankey, { DxLink } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxLink
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Link } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Link colorMode="source" {/* or "target" | "gradient" */} />
            </Sankey>
        )
    }
}

export default App;

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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxNode color="blue" />
        <DxLink color="green" />
    </DxSankey>
</template>

<script>
import DxSankey, { DxLink, DxNode } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxLink,
        DxNode
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Link, Node } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Node color="blue" />
                <Link color="green" />
            </Sankey>
        )
    }
}

export default App;

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

See Also