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>
Thanks Marisa, that was exactly the solution I was looking for.
Henrik
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