I have a graph that contains nodes (groups) composed by inner nodes and when redering the graph, the groups are shown on top of the nodes they contain (I'm using a presset layout). In order to avoid that I have tried setting a z-index (so then only the border of the group is visible) for the groups as shown bellow with no luck.
style:{
selectors:{
'.group':{
fillColor: '#000000',
borderColor: '#000000',
borderWidth: 1,
shape:'roundrectangle',
'z-index':-5
//visibility:'hidden'
}
}
}
I also tried setting visibility:'hidden' but that hides the edges connecting the group as well. Is there any support for groups ? or maybe a way of setting the group fillColor as transparent so it doesn't hide its inner nodes?
The SVG renderer should accept transparent as a valid colour, as far as I can remember. What you're really looking for sounds like compound node support, which we'll have when the new canvas renderer is done -- by the end of the summer.
Related
I am playing around with AMCharts StockChart for a projcet I am working on.
I will like to change the orientation for the StockCharts to vertical:
i.e. the categoryAxis on the Left, and the Value Axis bottom - so the lines would show vertically instead of horizontal (as it is by default)
Does anybody know how to do this?
Basically, I want to take This Horizontal Chart and turn it into this vertical chart
Stock charts can only be rotated at the panel level. You can set rotate: true directly in each panel or in panelsSettings:
panelsSettings: {
rotate: true
}
You'll need to disable the global scrollbar and use a panel-level chartScrollbar as the global one doesn't get rotated.
panels: [{
chartScrollbar: {},
// ...
}],
chartScrollbarSettings: {
enabled: false
}
Here's a demo
Please see example screenshot - I cannot reproduce except on this site, it seems to be some conflict with the css but any ideas what?
Normally, plotly moves the legend at the top if there is not enough horizontal space. However, this example shows that the legend overlaps the graph. Even if I make the legend orientation horizontal, it still overlaps the graph.
Do you have any ideas why it could happen?
Adjusting the legend position in normalized coordinates should help. See also here.
I.e.:
layout = go.Layout(
legend={"x" : 1.2, "y" : 1}
)
Placing the legend outside of the plot works for me:
var layout = {
showlegend: true,
legend: {
x: 1,
}
};
Fixed by a css wizard https://tiki.org/item6567 (Luci):
.js-plotly-plot .plotly .main-svg {overflow: visible}
.js-plotly-plot .plotly .main-svg .legend {transform: translate(640px, 100px)}
I see there is an option for transitionConfig to enter values such as the animation style or the duration. I was wondering if there was a way to change the color of the background during the transition (the semi-transparent background that appears during the transition)? For example, I have fairly dark screens and during the transition the background kind of flashes white.
Is this either configurable directly, or is it maybe a property of the parent navigator?
Thanks
I see during the transition process the area between the focussed screen and the edge of the screen goes from white with an opacity of 1 to transparent. Is it possible to maybe begin from another color such as black?
Try adding:
cardStyle: {
backgroundColor: 'white'
},
in your StackNavigatorConfig
I solved this issue by adding this to my StackNavigator:
cardStyle: {
backgroundColor: 'rgba(0,0,0,0)',
opacity: 1,
},
Now the transition is completely transparent. I tried using only opacity: 1 as suggested but it didn't work. I'm using "react-navigation": "^1.5.11".
If you are were a TabBarNavigator component then you can have a look at this part of the documentation to fix color problems during transitions.
If you combine swipeEnabled, animationEnabled and lazy properties you will get a better result in transitions. Otherwise, a gray/transparent color will be used during screens' transitions.
const tabNavigatorConfig: TabNavigatorConfig = {
...
swipeEnabled: true,
animationEnabled: false,
lazy: false,
...
};
I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.
I am using jsplumb to represent dependencies between jobs.
Please see the below jsfiddle to see what I have so far.
JsFiddle
var arrow_template = {
connector:"StateMachine",
paintStyle:{lineWidth:3,strokeStyle:"#0060CF"},
hoverPaintStyle:{strokeStyle:"#dbe300"},
endpoint:"Blank",
anchors:["Right", "Left"],
reattach:false,
overlays:[["PlainArrow", {location:1, width:10, length:10} ]]
};
I want to add some horizontal offset to the left anchor of the connections so that it does not go over the scroll bar. Instead start from the panel border.
I have read the documentation for anchors here but I don't fully understand. When I try to play with anchor setup values I get no connections/arrows.
Appreciate any help.
Please see Anchor Offsets section:
In addition to supplying the location and orientation of an anchor, you can optionally supply two more parameters that define an offset in pixels from the given location.
So if you replace anchors:["Right", "Left"], with anchors:[[1, 0.5, 0, 0, 18, 0], "Left"], your issue will be resolved.
JSFiddle Demo