Customization
You can configure the labels, nodes, and links displayed on the Sankey Diagram by using the following properties:
-
links—Provides options to set thecolorTypeof the link to eitherstatic,source, ortarget. It also allows you to control the opacity and highlighting of the link. -
nodes—Provides options to modify thecolor,opacity,offset,padding, andwidthof the node. -
labels—Provides options to modify thefont,color, andopacityof the label. It also allows you to set thevisibleproperty to show or hide the label.
Configure the Link Colors
The Sankey diagram provides different colorTypes of the links. The supported values are:
-
static—The color is static and is determined by the link's color option. -
source—The link color is the same as the source node color. -
target—The link color is the same as the target node color.
The example below demonstrates the different colorTypes. You can select a colorType from the DropDownList at the top:
<input type="text" id="ddl" />
<div id="sankey"></div>
<script>
$(document).ready(function() {
const data = {
nodes: [
{
id: "female",
label: {
text: "Female (58%)",
},
},
{
id: "male",
label: {
text: "Male (42%)",
},
},
{
id: "tablet",
label: {
text: "Tablet (12%)",
},
},
{
id: "mobile",
label: {
text: "Mobile (40%)",
},
offset: {
left: 20,
},
},
{
id: "desktop",
label: {
text: "Desktop (48%)",
},
},
{
id: "< 18",
label: {
text: "< 18 years (8%)",
},
},
{
id: "18-26",
label: {
text: "18-26 years (35%)",
},
},
{
id: "27-40",
label: {
text: "27-40 years (38%)",
},
},
{
id: "> 40",
label: {
text: "> 40 years (19%)",
},
},
],
links: [
{
sourceId: "female",
targetId: "tablet",
value: 12,
color: "#317773",
},
{
sourceId: "female",
targetId: "mobile",
value: 14,
},
{
sourceId: "female",
targetId: "desktop",
value: 32,
},
{
sourceId: "male",
targetId: "mobile",
value: 26,
},
{
sourceId: "male",
targetId: "desktop",
value: 16,
},
{
sourceId: "tablet",
targetId: "< 18",
value: 4,
},
{
sourceId: "tablet",
targetId: "> 40",
value: 8,
},
{
sourceId: "mobile",
targetId: "< 18",
value: 4,
},
{
sourceId: "mobile",
targetId: "18-26",
value: 24,
},
{
sourceId: "mobile",
targetId: "27-40",
value: 10,
},
{
sourceId: "mobile",
targetId: "> 40",
value: 2,
},
{
sourceId: "desktop",
targetId: "18-26",
value: 11,
},
{
sourceId: "desktop",
targetId: "27-40",
value: 28,
},
{
sourceId: "desktop",
targetId: "> 40",
value: 9,
},
],
};
const element = $("#sankey").css({ width: 900, height: 600}).kendoSankey({
title: {
text: 'Sankey Diagram'
},
links: { colorType: 'target' },
data: data
});
const sankey = element.getKendoSankey();
let ddl = $('#ddl').kendoDropDownList({
optionLabel: 'Select links colortype',
dataSource: {
data: ["static", "source", "target"]
},
change: function(e){
sankey.setOptions({
links: { colorType: e.sender.value() },
});
}
}).data('kendoDropDownList')
});
</script>
Customizing Specific Node or Link
As the properties set to data take precedence, using the data property allows you to target a single node or link and apply a specific configuration only to that element.
The demo below shows how to configure and use the data prop to:
- Change the color of the first link.
-
Change the offset of the node with the label text Мobile.
<div id="sankey"></div> <script> $(document).ready(function() { const data = { nodes: [ { id: "female", label: { text: "Female (58%)", }, }, { id: "male", label: { text: "Male (42%)", }, }, { id: "tablet", label: { text: "Tablet (12%)", }, }, { id: "mobile", label: { text: "Mobile (40%)", }, offset: { left: 50, }, }, { id: "desktop", label: { text: "Desktop (48%)", }, }, { id: "< 18", label: { text: "< 18 years (8%)", }, }, { id: "18-26", label: { text: "18-26 years (35%)", }, }, { id: "27-40", label: { text: "27-40 years (38%)", }, }, { id: "> 40", label: { text: "> 40 years (19%)", }, }, ], links: [ { sourceId: "female", targetId: "tablet", value: 12, color: "darkblue", }, { sourceId: "female", targetId: "mobile", value: 14, }, { sourceId: "female", targetId: "desktop", value: 32, }, { sourceId: "male", targetId: "mobile", value: 26, }, { sourceId: "male", targetId: "desktop", value: 16, }, { sourceId: "tablet", targetId: "< 18", value: 4, }, { sourceId: "tablet", targetId: "> 40", value: 8, }, { sourceId: "mobile", targetId: "< 18", value: 4, }, { sourceId: "mobile", targetId: "18-26", value: 24, }, { sourceId: "mobile", targetId: "27-40", value: 10, }, { sourceId: "mobile", targetId: "> 40", value: 2, }, { sourceId: "desktop", targetId: "18-26", value: 11, }, { sourceId: "desktop", targetId: "27-40", value: 28, }, { sourceId: "desktop", targetId: "> 40", value: 9, }, ], }; const element = $("#sankey").css({ maxWidth: 700, height: 300}).kendoSankey({ data: data }); }); </script>