Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
200
Positioning issue
posted

Hi,

I have two line charts that I try to make as identical as possible, but the X axis label text moves the axis to far to the right compared with the other line chart (i.e. the red line).

Is it possible to set the width of the label group on both charts? The reason being that I want the Y axis tickmarks to be positioned identically on both charts.

Similar code for both charts:

<igWebChart:XamWebChart Grid.Row="1" Name="chart" UseLayoutRounding="False" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
            <igWebChart:XamWebChart.Legend>
                <igWebChart:Legend Visibility="Collapsed"/>
            </igWebChart:XamWebChart.Legend>
            <igWebChart:XamWebChart.Scene>
                <igWebChart:Scene Background="Transparent" BorderThickness="2">
                </igWebChart:Scene>
            </igWebChart:XamWebChart.Scene>
            <igWebChart:XamWebChart.Series>
                <igWebChart:Series ChartType="Line" StrokeThickness="2" Fill="White" Animation="{StaticResource chart_DataPointAnimation}">
                </igWebChart:Series>
            </igWebChart:XamWebChart.Series>
            <igWebChart:XamWebChart.Axes>
                <igWebChart:Axis AxisType="PrimaryY" x:Name="axisY">
                    <igWebChart:Axis.Label>
                        <igWebChart:LabelGroup Foreground="{StaticResource chart_LightSchemeForeground}" DistanceFromAxis="2" Format="{}{0:0.#}%" AutoResize="True" TextAlignment="Left" />
                    </igWebChart:Axis.Label>
                    <igWebChart:Axis.MajorGridline>
                        <igWebChart:GridlineGroup Stroke="{StaticResource chart_LightSchemeGridline}"/>
                    </igWebChart:Axis.MajorGridline>
                    <igWebChart:Axis.MajorTickMark>
                        <igWebChart:TickMarkGroup Stroke="{StaticResource chart_LightSchemeTickmark}"/>
                    </igWebChart:Axis.MajorTickMark>
                </igWebChart:Axis>
                <igWebChart:Axis AxisType="PrimaryX" x:Name="axisX">
                    <igWebChart:Axis.Label>
                        <igWebChart:LabelGroup Foreground="{StaticResource chart_LightSchemeForeground}" AutoResize="True" TextAlignment="Left" Angle="270" DistanceFromAxis="15" />
                    </igWebChart:Axis.Label>
                    <igWebChart:Axis.MajorGridline>
                        <igWebChart:GridlineGroup Stroke="{StaticResource chart_LightSchemeGridline}"/>
                    </igWebChart:Axis.MajorGridline>
                    <igWebChart:Axis.MajorTickMark>
                        <igWebChart:TickMarkGroup Stroke="{StaticResource chart_LightSchemeTickmark}"/>
                    </igWebChart:Axis.MajorTickMark>
                </igWebChart:Axis>
            </igWebChart:XamWebChart.Axes>
        </igWebChart:XamWebChart>

 

Parents
  • 1134
    Verified Answer
    posted

    Hi hamundse,

    I'm sorry for the delay in response.  In case you are still experiencing this issue, I've attached a project demonstrating something similar to what you're experiencing.  However, I set the Margin property of the bottom chart to 4, which correctly aligned the Y-Axis of the bottom chart with the top chart.  Doing something similar in your application should hopefully fix the issue you are experiencing.

    Hope this helps,

    Marisa

    WebChart_Margin.zip
Reply Children
No Data