When initialing loading the vis network chart, all nodes crowded together, due to some reason I could not set layout improvedLayout to true, and also I need to set physics to disable.
here is my option setting, please advise how I can let the nodes positioned well within the following option setting.
var options = {
"edges": {
"smooth": { "forceDirection": "none" }
},
"physics": { "enabled": false, "minVelocity": 0.75 },
"layout": { improvedLayout: _improvedLayout }
}
initialing loading, all nodes stay together which makes me hard to see them:
with improvedLayout set to true, it displays well, but the performance is really bad I could not set it in this way.
here is an example: I have 77 edges and 65 nodes, it took 7-8 seconds to draw the network picture when I set improvedLayout to true, is that normal?
Related
I am trying to space out the nodes between the various nodes that are in my network. Now, the network has a lot of nodes with many relationships between them. However, no matter how much I play with the layout and hierarchical options, the nodes are always overlapping each other when they show up on the screen. I have tried to adjust the various options shown below to no avail. Is it possible to space the nodes out further? I don't mind a scrollbar either.
const options = {
layout: {
// improvedLayout: true,
// clusterThreshold: 500,
hierarchical: {
direction: "UD",
sortMethod: "directed",
nodeSpacing: 100,
//treeSpacing: 100,
edgeMinimization: false,
parentCentralization: true
},
},
};
Ref: https://atomiks.github.io/tippyjs/
The z-index seems not be working when specifying interactive:true (then it falls behind other elements) although I specify the #main_container. How can I get it "on front of everything" with interactive:true?
delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true,
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );
see also here: https://github.com/projectje/bookmark for the above code. I made a temporary workaround by placing a BR behind every first character so that it will not flow over other boxes. But this is really a short-term workaround.
The tippy is appended to the reference element's parent by default when interactive — this can cause it to be clipped if the parent is a "containing block".
To fix use one of these:
Use popperOptions: { strategy: 'fixed' }, or
Specify appendTo: document.body + focus management for keyboard usage
I have a line chart with a y axis scale that has ticks with a step size of 5, I would like to have the gridlines have a step/interval of 1. I can't see an obvious way to do it, is there anyway to achieve this in chart.js?
Thanks in advance!
Unfortunately, with the current Chart.js API, there is no clean way to configure gridline placement independent from tick placement. In other words you cannot configure an axis to show a tick every 5 steps while still showing gridlines every 1 step.
Even though there is no clean way, there is however, still a way to get the behavior your after.
The below configuration will give you the desired results, but the only drawback is the gridlines still extend beyond the axis for the hidden tick labels (e.g. it looks a little funny).
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
},
callback: function(value, index, values) {
if (value % 5 === 0) {
return value;
} else {
return ' ';
}
},
}]
}
}
});
Here is a working example via codepen.
I am also trying to positioning a node in a cell in grid layout as below
layout: { name: 'grid',
fit: true, // whether to fit the viewport to the graph
rows:5,
columns:12,
padding: 10, // the padding on fit
position: function( node )
{ console.log("Row : "+node.data('row') + ", COL : "+node.data('col'));
return {row:3, col:node.data('col')};
}
},
But node is always created in the middle of the canvas, even if I hardcode the row as above. Any suggestion, what is going on.
Thank you
If you're manually specifying positions, you shouldn't need to set the overall dimensions. Maybe you've overconstrained it (e.g. row beyond rows)?
Alternatively, you could set the dimensions and a sort function to indicate the ordering.
I am trying to build a network with vis with labels inside the nodes where the text scales with the value. Based on the 'scaling' documentation for nodes, this should be possible.
I took the example network code from the getting started section of the documentation and added values to the nodes. If I set the shape to something with the label external (like 'square'), the nodes change size: Fiddle
But if I change to shape where the label is inside the node, they no longer scale: Fiddle
I'm guessing it's a problem with my options, but I did the part of setting nodes.scaling.label.enabled to true:
var options = {
nodes: {
shape: 'square',
scaling: {
label: {
enabled: true
}
}
}
};