Node Invisible with small value

[harshwd]

Hi Team,

Do we have any property where I can increase node height or can give fixed size? Basically nodes are sized proportionately to the values. If value is too small than node becomes invisible, so how to fix it?

[kurkle]

Can you provide a sample config? I suppose we could add a "min size" option for a node

[harshwd]

Thank You for the reply. Can you pls share "min size" sample? Below is the sample code and screenshot attached.

In screenshot you can see node height very thin and label also not properly aligned. I want to have both node and label properly visible.

Sample code:

var ctx = document.getElementById("chartTest").getContext("2d"); var colors = { Total: '#2C2E2F',
'Room1': '#0078B4', 'Room2':"#7979CD", 'sec1': '#0078B4', 'sec2':'#0078B4' , 'sec3':'#0078B4' , 'sec4': '#0078B4', 'sec5': '#0078B4', 'sec6':'#0078B4' , 'sec7': '#0078B4', 'sec8': '#0078B4', 'sec9': '#0078B4', 'sec10': '#0078B4', 'sec11':'#0078B4' , 'sec12':'#0078B4' , 'sec13': '#0078B4', 'sec14':'#0078B4' , 'sec15': '#0078B4', 'sec16':'#0078B4', 'sec17': '#0078B4', 'sub1': "#7979CD", 'sub2': "#7979CD", 'sub3': "#7979CD", 'sub4': "#7979CD" , 'sub5': "#7979CD", 'sub6': "#7979CD" };

//the y-order of nodes, smaller = higher var priority = {

};

var labels = {

}

function getColor(name) { return colors[name] || "#68DE8F"; }

var chart = new Chart(ctx, { type: "sankey", options: { maintainAspectRatio: false, animations: { progress: { duration: 2000, easing: 'easeInOutCirc', from: 0, to: 2, delay:1000, loop: false } }, resizeDelay: 300, font: { size: 12 }, plugins: { tooltip: { enabled: false, bodyFont: { size: 14 } }, datalabels: { display: false, } }, }, data: { datasets: [ { data: [ {from: 'Total', to: 'Room1', flow: 5278.83}, {from: 'Total', to: 'Room2', flow: 87112.42}, {from: 'Room1', to: 'sec1', flow: 11.97}, {from: 'Room1', to: 'sec2', flow: 12.77}, {from: 'Room1', to: 'sec3', flow: 61.23}, {from: 'Room1', to: 'sec4', flow: 6.35}, {from: 'Room1', to: 'sec5', flow: 79.12}, {from: 'Room1', to: 'sec6', flow: 5.27}, {from: 'Room1', to: 'sec7', flow: 6.78}, {from: 'Room1', to: 'sec8', flow: 1.05}, {from: 'Room1', to: 'sec9', flow: 3.08}, {from: 'Room1', to: 'sec10', flow: 16.83}, {from: 'Room1', to: 'sec11', flow: 37.35}, {from: 'Room1', to: 'sec12', flow: 0.37}, {from: 'Room1', to: 'sec13', flow: 58.95}, {from: 'Room1', to: 'sec14', flow: 6.97}, {from: 'Room1', to: 'sec15', flow: 13.6}, {from: 'Room1', to: 'sec16', flow: 4952.97}, {from: 'Room1', to: 'sec17', flow: 4.18}, {from: 'Room2', to: 'sub1', flow: 6.77}, {from: 'Room2', to: 'sub2', flow: 23.33}, {from: 'Room2', to: 'sub3', flow: 14.82}, {from: 'Room2', to: 'sub4', flow: 85024.57} , {from: 'Room2', to: 'sub5', flow: 12.33}, {from: 'Room2', to: 'sub6', flow: 2030.6}

    ],
    priority,
    labels,
    colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
    colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
    borderWidth: 2,
    borderColor: 'black'
  }
]

} });

[richardtallent-erm]

My solution was to modify my data on the way in to ensure that no displayed value was less than 5% of the total value. I made the actual values part of the labels so the user can see them.

That said, being able to establish top/bottom padding for each element would fix this issue, and would resolve a related issue where the labels aren't "overlapping" per se but are too close together for my aesthetic.