jQuery Sankey - 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
],
// ...
})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
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
$(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
],
// ...
})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
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 property. Note that the links' colorMode property 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
],
// ...
})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
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: