jQuery Sankey - Resolve Overlapping
Node labels can overlap when the Sankey contains many nodes. You can specify the label.overlappingBehavior property to resolve overlapping: you can hide overlapping labels, truncate them with ellipsis, or leave them overlapped:
jQuery
JavaScript
$(function() {
$("#sankeyContainer").dxSankey({
// ...
label: {
overlappingBehavior: "ellipsis" // or "hide" | "none"
}
});
});Angular
HTML
TypeScript
<dx-sankey ... >
<dxo-label
overlappingBehavior="ellipsis"> <!-- or "hide" | "none" -->
</dxo-label>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxSankeyModule
],
// ...
})Vue
App.vue
<template>
<DxSankey ... >
<DxLabel overlapping-behavior="ellipsis" <!-- or "hide" | "none" --> />
</DxSankey>
</template>
<script>
import DxSankey, { DxLabel } from 'devextreme-vue/sankey';
export default {
components: {
DxSankey,
DxLabel
}
}
</script>React
App.js
import React from 'react';
import Sankey, { Label } from 'devextreme-react/sankey';
class App extends React.Component {
render() {
return (
<Sankey ... >
<Label overlappingBehavior="ellipsis" {/* or "hide" | "none" */} />
</Sankey>
)
}
}
export default App;See Also
Feedback