The intent that I have is to show a bell curve behind a bar chart.
When you have just the single series, the spline area displays edge to edge. This is what I want to achieve.
When I add the BarChart series, the x-axis of the spline chart moves to the center of the column.
How would I force the Spline Area series to display edge to edge?
<ic:XamDataChart x:Name="StanineChart" Grid.Column="1" Margin="0,20,20,20" Brushes="{StaticResource GenderGraphBrushCollection}" > <ic:XamDataChart.Axes> <ic:CategoryXAxis x:Name="XAxis" ItemsSource="{Binding BoysStanines1}" Label="{}{Stanine}" Title="Stanine" > <ic:CategoryXAxis.LabelSettings> <ic:AxisLabelSettings VerticalAlignment="Bottom" FontSize="14.667" /> </ic:CategoryXAxis.LabelSettings> </ic:CategoryXAxis> <ic:NumericYAxis x:Name="YAxis" Title="Count" > <ic:NumericYAxis.LabelSettings> <ic:AxisLabelSettings Extent="50" Location="OutsideLeft" FontSize="14.667" /> </ic:NumericYAxis.LabelSettings> </ic:NumericYAxis> </ic:XamDataChart.Axes> <ic:XamDataChart.Series> <ic:SplineAreaSeries ItemsSource="{Binding BellCurveData}" ValueMemberPath="Value" XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}"> </ic:SplineAreaSeries>
<ic:ColumnSeries Title="Feb1 - Mar30 2014 Boys" Legend="{Binding ElementName=TitleLegend}" XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}" ItemsSource="{Binding BoysStanines1}" ValueMemberPath="Value" /> <ic:ColumnSeries Title="Feb1 - Mar30 2014 Girls" Legend="{Binding ElementName=TitleLegend}" XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}" ItemsSource="{Binding GirlsStanines1}" ValueMemberPath="Value" /> </ic:XamDataChart.Series> </ic:XamDataChart>
<ic:Legend x:Name="TitleLegend" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20" Content="Legend"/>
Attached is the image of the Bell Curve displayed edge to edge.
Hi Brian,
Thank you for your posts. I have been looking into your questions and this is the expected behavior in this scenario because the first and the last data point has value “3” and the minimum Y axis value is 2. My suggestion is to set the minimum value of the Y axis to 3 or add dummy values in your data collection like e.g.:
this.Add(new SimpleDataPoint() { Label = "", Value = 1, Value1 = 0, Value2 = 0 }); // dummy data point
this.Add(new SimpleDataPoint() { Label = "1", Value = 3.0, Value1 = 9, Value2 = 6 });
this.Add(new SimpleDataPoint() { Label = "2", Value = 5.0, Value1 = 4, Value2 = 8 });
this.Add(new SimpleDataPoint() { Label = "3", Value = 8.0, Value1 = 6, Value2 = 0 });
this.Add(new SimpleDataPoint() { Label = "4", Value = 11.0, Value1 = 8, Value2 = 9 });
this.Add(new SimpleDataPoint() { Label = "5", Value = 13.0, Value1 = 2, Value2 = 7 });
this.Add(new SimpleDataPoint() { Label = "6", Value = 11.0, Value1 = 9, Value2 = 6 });
this.Add(new SimpleDataPoint() { Label = "7", Value = 8.0, Value1 = 7, Value2 = 3 });
this.Add(new SimpleDataPoint() { Label = "8", Value = 5.0, Value1 = 6, Value2 = 8 });
this.Add(new SimpleDataPoint() { Label = "9", Value = 3.0, Value1 = 2.5, Value2 = 2.5 });
This way the spline series will not be cut.
Let me know, if you need any further assistance on this matter.
Hello Brian,
I am just checking if you require any further assistance on the matter.
Sincerely,
Krasimir, MCPD
Developer Support Supervisor - XAML
Infragistics
www.infragistics.com/support
Unfortunately the above solution did not work. It skews the bar graph with the actual results.
What I have done to resolve this is to have 2 XamDataChart controls. One on top of the other. The one behind has transparent Major and Minor strokes, and transparent labels.
Thank you for your feedback. We are glad that you resolved your issue and we believe that other community members may benefit from this as well.
Thanks again.