I am new to AngularJS, I made donut pie chart using NDV3 and just want to move the legend to the right side but I can't get it working.
Now I tried to move legend to the right side of the donut pie chart by using legendposition, but it is not working. Can anyone guide me on how to do this?thanks
Here is my code: Plunker
NVD3 does not support the option to change the placement of the legend. You'll have to do it manually or modify the source. You can of course also modify the CSS for the nv-legendWrap and try positioning the legend.
I found a workaround, you can play with the positions in the CSS by overriding the default transform property. The first value is the X position and the second is the Y position.
.nv-series:nth-child(1){ transform: translate(0, 0); }
.nv-series:nth-child(2){ transform: translate(0, 20px); }
.nv-series:nth-child(3){ transform: translate(0, 40px); }
.nv-series:nth-child(4){ transform: translate(0, 60px); }
.nv-series:nth-child(5){ transform: translate(0, 80px); }
.nv-series:nth-child(6){ transform: translate(0, 100px); }
.nv-series:nth-child(7){ transform: translate(0, 120px); }
.nv-legend{ transform: translate(350px, 100px); }
Here is a preview in your Plunker
Related
I am trying to position this sidebar just the opposite of what it is currently doing. I want the sidebar to come in from the right and stay right all through. not left.
this the sandbox link for you to reproduce - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr.
Thank you.
Position the sidebar to the right first.
.sidebar {
position: absolute;
right:0;
}
Change the transform to positive x direction
from: {
transform: "translateX(100%)"
},
enter: {
transform: `translateX(0)`
},
leave: {
transform: "translateY(100%)"
},
Where should I put react transition group style classes in my scss ? I want to animate fading. After inspecting it in action I clearly see the classes attached, but with no effect. I think I treid putting them almost everywhere.
Anyone with experience ?
#transitionGroupDiv{
// gallery styles etc.
// NOT WORKING HERE
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 10000ms ease-out;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
transition: opacity 10000ms ease-out;
}
.element{
// other styles etc.
}
}
I actually was not aware of scss rules. You have to use the parent selector reference &.
Example in this question: SO question.
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
This may be a very simple question for most of you, but I'm having a very difficult time figuring this out.
I have a data table that's big enough to run the entire screen. It's very specific so pagination is out of question. The issue that I'm having is with animation. I have the table inside div with ng-view. I want fadeInUp animation such that the fadeInUp seems to be from around 60-100px from the top. However, the current fadeInUp comes sliding up from the bottom of the screen which I do not want. How can I make it so that it slides up from the desired height?
<div ng-view class="content-wrapper ng-fadeInUp">
[ng-view].ng-enter{
animation:fadeInUp 1s;
}
This is what's making it slide up from the bottom of the screen. I tried using "Animate.css" which did the same thing. I want it so that it seems it's barely sliding up. Just a small hint of animation instead of the full slide up.
Take the original CSS from example animate.css and modify it:
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
Change the second parameter in translate3d to what you want, for example:
transform: translate3d(0, 20px, 0);
Demo: http://plnkr.co/edit/W5zsmhYkwXxYJbuft5pu?p=preview
I am trying to change the position of the legends to the bottom of piechart [which is top by default]. In normal nvd3.js without angular-nvd3, it's suggested to use:
d3.select(".nv-legendWrap")
.attr("transform", "translate(100,100)");
Is it possible to do this in angular-nvd3 or is there another option?
Override the CSS with your custom attributes:
.your-div-class .nv-series:nth-child(1){ transform: translate(0, 0); }
.your-div-class .nv-series:nth-child(2){ transform: translate(0, 20px); }
.your-div-class .nv-series:nth-child(3){ transform: translate(0, 40px); }
.your-div-class .nv-series:nth-child(4){ transform: translate(0, 60px); }
.your-div-class .nv-series:nth-child(5){ transform: translate(0, 80px); }
.your-div-class .nv-series:nth-child(6){ transform: translate(0, 100px); }
.your-div-class .nv-series:nth-child(7){ transform: translate(0, 120px); }
.your-div-class .nv-legend{ transform: translate(180px, 150px); }
.your-div-class .nv-legendWrap{ transform: translate(-80px, 70px); }
your-div-class refers to the class applied to the div container which contains your chart directive. Change the translate(0, 0) property with your (x, y) pixel values.