How to scale these Lines up from the bottom?

Question

This multi-axis chart has 2 Line, cashLine and kindLine, and a Path with EllipseGeometry, circle, inside a Grid named container, each of these is a FrameworkElement named Pin:

these are defined in the constructor of Pin:

cashLine = new Line() {  
    Stroke = cashBrush,  
    StrokeThickness = 2,  
    RenderTransform = new ScaleTransform(1, 0)  
};  
kindLine = new Line() {  
    Stroke = kindBrush,  
    StrokeThickness = 2,  
    RenderTransform = new ScaleTransform(1, 0)  
};  
circleGeo = new EllipseGeometry() { RadiusX = radius, RadiusY = radius };  
circle = new Path() {  
    Fill = circleBrush,  
    Data = circleGeo,  
    RenderTransform = new TransformGroup() {  
        Children = {  
            new TranslateTransform(),  
            new ScaleTransform(0,0)  
        }  
    }  
};  

for the computational ease, I've LayoutTransform = new ScaleTransform() { ScaleY = -1 }; in the chart class, MultiLineChart, and to fix the layout in the Pin, I've another LayoutTransform = new ScaleTransform() { ScaleY = -1 }; in the container of Pin. This animation is called in Loaded handler, of Pin, onLoaded:

onLoadAnim = new DoubleAnimation() {  
    To = 1,  
    Duration = TimeSpan.FromSeconds(2),  
    EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn }  
};  

and I've these in the onLoaded:

void onLoaded(object sender, RoutedEventArgs e) {  
    ((TranslateTransform)((TransformGroup)circle.RenderTransform).Children[0]).Y = -available.Height + container.ActualHeight;  
    ((ScaleTransform)((TransformGroup)circle.RenderTransform).Children[1]).CenterY = -available.Height + container.ActualHeight;  
    ((ScaleTransform)((TransformGroup)circle.RenderTransform).Children[1]).CenterX = available.Width / 2;  
    //((ScaleTransform)cashLine.RenderTransform).ScaleY = -available.Height + container.ActualHeight;  
    //((ScaleTransform)kindLine.RenderTransform).ScaleY = -available.Height + container.ActualHeight;  
    cashLine.RenderTransform.BeginAnimation(ScaleTransform.ScaleYProperty, onLoadAnim);  
    kindLine.RenderTransform.BeginAnimation(ScaleTransform.ScaleYProperty, onLoadAnim);  
    ((TransformGroup)circle.RenderTransform).Children[0].BeginAnimation(TranslateTransform.YProperty, onLoadAnim);  
    ((TransformGroup)circle.RenderTransform).Children[1].BeginAnimation(ScaleTransform.ScaleXProperty, onLoadAnim);  
    ((TransformGroup)circle.RenderTransform).Children[1].BeginAnimation(ScaleTransform.ScaleYProperty, onLoadAnim);  
}  

The circle does what I wanted BUT couldn't fix the scale animation of cashLine and kindLine! I want those lines to rise up from the bottom. How to do that?

Answer 1

I actually don't need that container Grid. The idea came from the stacked bar chart on the bottom right, I used a grid there.

and I don't need LayoutTransform either in Pin. With the container Grid, there's another problem. Feels like, there's a vertical spacing between items in each grid row, am I right?