DevExtreme jQuery - 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
$(function() {
$("#sankeyContainer").dxSankey({
// ...
palette: "Bright",
// or a custom palette
// palette: ["#70c92f", "#f8ca00", "#bd1550"],
paletteExtensionMode: "alternate"
});
});Angular
<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
$(function() {
$("#sankeyContainer").dxSankey({
// ...
link: {
colorMode: "source" // or "target" | "gradient"
}
});
});Angular
<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
$(function() {
$("#sankeyContainer").dxSankey({
// ...
node: {
color: "blue"
},
link: {
color: "green"
}
});
});Angular
<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: