jQuery Sankey - Customize Labels
NOTE
You can use the customizeText function to change the labels' text. Its argument contains a Node object that provides information about the node being customized. The function should return a string value that will be used as a label's text.
In the following example, the customizeText function is used to add incoming and outgoing weight values to the label:
jQuery
JavaScript
$(function() {
var weightsReducer = function(accumulator, currentValue) {
return accumulator + currentValue.weight;
}
$("#sankeyContainer").dxSankey({
// ...
label: {
customizeText: function(node) {
return node.title + " (in: " + node.linksIn.reduce(weightsReducer, 0) + ", "
+ "out: " + node.linksOut.reduce(weightsReducer, 0) + ")";
}
}
});
});Angular
TypeScript
HTML
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
constructor() {
this.sankey_label_customizeText = this.sankey_label_customizeText.bind(this);
}
weightsReducer(accumulator, currentValue) {
return accumulator + currentValue.weight;
}
sankey_label_customizeText(node) {
return node.title + " (in: " + node.linksIn.reduce(this.weightsReducer, 0) + ", "
+ "out: " + node.linksOut.reduce(this.weightsReducer, 0) + ")";
}
}
@NgModule({
imports: [
// ...
DxSankeyModule
],
// ...
})<dx-sankey ... >
<dxi-series>
<dxo-label
[customizeText]="sankey_label_customizeText">
</dxo-label>
</dxi-series>
</dx-sankey>Vue
App.vue
<template>
<DxSankey ... >
<DxLabel :customize-text="customizeText" />
</DxSankey>
</template>
<script>
import DxSankey, { DxLabel } from 'devextreme-vue/sankey';
const weightsReducer = (accumulator, currentValue) => {
return accumulator + currentValue.weight;
}
export default {
components: {
DxSankey,
DxLabel
},
methods: {
customizeText(node) {
return `${node.title} (in: ${node.linksIn.reduce(weightsReducer, 0)}, out: ${node.linksOut.reduce(weightsReducer, 0)})`;
}
}
}
</script>React
App.js
import React from 'react';
import Sankey, { Label } from 'devextreme-react/sankey';
const weightsReducer = (accumulator, currentValue) => {
return accumulator + currentValue.weight;
}
class App extends React.Component {
render() {
return (
<Sankey ... >
<Label customizeText={this.customizeText} />
</Sankey>
)
}
customizeText(node) {
return `${node.title} (in: ${node.linksIn.reduce(weightsReducer, 0)}, out: ${node.linksOut.reduce(weightsReducer, 0)})`;
}
}
export default App;See Also
Feedback