-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Open
Labels
Description
Add the possibility to custom change the anchor of the node text
Current:

After:

Minimum example code:
import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go
# Inicializa o app Dash
app = dash.Dash(__name__)
app.title = "Sankey Colorido"
# ----------- Sankey básico -------------
labels = ["A1", "A2", "B1", "B2", "C1", "C2"]
sources = [0, 1, 0, 2, 3, 3]
targets = [2, 3, 3, 4, 4, 5]
values = [8, 4, 2, 8, 4, 2]
fig = go.Figure(go.Sankey(
arrangement="snap",
node=dict(
pad=15,
thickness=20,
line=dict(color="black", width=0.5),
label=labels,
color="blue"
),
link=dict(
source=sources,
target=targets,
value=values
)
))
fig.update_layout(title_text="Basic Sankey Diagram", font_size=10)
# ----------- Layout Dash -------------
app.layout = html.Div([
dcc.Graph(
id="sankey-graph",
figure=fig,
style={"width":"100%", "height":"100vh"}
)
])
# ----------- Client-side callback para alinhar labels -------------
# desloca horizontalmente e alinha à direita
app.clientside_callback(
"""
function(figure) {
setTimeout(() => {
const labels = document.querySelectorAll('.sankey .node-label');
labels.forEach(label => {
const transform = label.getAttribute('transform');
const match = /translate\\(([^,]+),([^)]+)\\)/.exec(transform);
if(match){
const y = parseFloat(match[2]);
const x = -15; // deslocamento horizontal
label.setAttribute('transform', `translate(${x},${y})`);
label.setAttribute('text-anchor','end'); // alinhamento à direita
}
});
}, 500); // espera renderização
return figure;
}
""",
Output('sankey-graph', 'figure'),
Input('sankey-graph', 'figure')
)
if __name__ == "__main__":
app.run(debug=True)
The clientside_callback is replaced after user interaction with the graph