Hello,my project uses XamCategoryCharts aswell as some XamDataCharts in which both I am displaying line series. I got the problem that in the XamDataChart the markers and Lines are being cut off by the boundaries of the graph area. I don't have this problem with XamCategoryCharts. I included a screenshot of both graps:
XamDataChart (above)
XamCategoryChart (above)This is the xaml code for both of them:
<ig:XamDataChart Visibility="Visible" x:Name="ProductionHistoryChart" DataContext="{Binding ProductionHistory}" Margin="20,120,50,20"> <ig:XamDataChart.Axes> <ig:TimeXAxis x:Name="xAxis" Title="Vergangene Minuten" ItemsSource="{Binding DataContext, ElementName=ProductionHistoryChart}" DateTimeMemberPath="TimeInterval"> <ig:TimeXAxis.Intervals> <ig:TimeAxisInterval Interval="1" IntervalType="Minutes" /> </ig:TimeXAxis.Intervals> <ig:TimeXAxis.LabelFormats> <ig:TimeAxisLabelFormat Format="HH:mm"/> </ig:TimeXAxis.LabelFormats> <ig:TimeXAxis.TitleSettings> <ig:TitleSettings FontSize="40"/> </ig:TimeXAxis.TitleSettings> <ig:TimeXAxis.LabelSettings> <ig:AxisLabelSettings Extent="100" FontSize="25"/> </ig:TimeXAxis.LabelSettings> </ig:TimeXAxis> <ig:NumericYAxis Title="Stück pro Minute" x:Name="yAxis"> <ig:NumericYAxis.TitleSettings> <ig:TitleSettings Angle="270" FontSize="40"/> </ig:NumericYAxis.TitleSettings> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Extent="100" VerticalAlignment="Bottom" FontSize="25"/> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries MarkerOutline="White" Thickness="15" ItemsSource="{Binding DataContext, ElementName=ProductionHistoryChart}" ValueMemberPath="Value" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}"> <ig:LineSeries.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Item.TimeInterval,StringFormat=HH:mm}" FontSize="30" FontWeight="Bold" /> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="30" Text="Stück: " /> <TextBlock FontSize="30" Text="{Binding Item.Value}"/> </StackPanel> </StackPanel> </ig:LineSeries.ToolTip> </ig:LineSeries> </ig:XamDataChart.Series> <ig:XamDataChart.Brushes> <ig:BrushCollection> <SolidColorBrush Color="#004c63"/> <SolidColorBrush Color="#00988c"/> </ig:BrushCollection> </ig:XamDataChart.Brushes> </ig:XamDataChart> <ig:XamCategoryChart Visibility="Visible" IsTransitionInEnabled="False" IsVerticalZoomEnabled="False" IsHorizontalZoomEnabled="False" MarkerOutlines="0" MarkerBrushes="White" Thickness="15" Margin="10,120,10,10" YAxisLabelFontSize="25" XAxisLabelFontSize="25" YAxisTitleFontSize="40" XAxisTitleFontSize="40" XAxisTitle="Zeitverlauf" YAxisTitle="Stück pro Minute" ChartType="Line" x:Name="productionHistory" ItemsSource="{Binding ProductionHistory}"> <ig:XamCategoryChart.Brushes> <ig:BrushCollection> <SolidColorBrush Color="#004c63"/> <SolidColorBrush Color="#00988c"/> </ig:BrushCollection> </ig:XamCategoryChart.Brushes> </ig:XamCategoryChart>
Hello Martin,
I believe it is working with XamCategoryChart because we set the ComputedPlotAreaMargin internally by default, for XamDataChart it equivalent property should be PlotAreaMargin,
you would need to provide the thickness.
If that doesn’t help then try setting ComputedPlotAreaMarginMode enum.
Hello Divya
Nice Feature...
I made some Experiments setting the PlotAreaMargin (sample below set to 10).
Now the plots give some problems with the display of grids:
The ends extend the series axis major ticks range (red circles)
The beginning is missing (green arrow)
Hello Horst,
Discussed the matter with the developer and both the behaviors are intended.
Grid line extended the series is by design when set the PlotAreaMargin
and beginning missing is also expected when its too close to the Axis stroke , it will not look good.
Although developer agreed to have these behavior optional and controlled by some properties but currently we don’t have any publicly property exposed would be a new feature idea
Hello Divia,
thank you for the update.
I would prefer that the series if not zoomed are drawn above the axis and grid as shown with another graph component example below.
The behavior you are expecting that chart drawn above the axis is also not possible because the canvas of the plot area of the chart/series is not the same as the axes. Chart can only draw with the plot area.
Where the plot area ends is where the axis canvas begins essentially, and things that appear in the plot area cannot appear on the axis.
that is exactly what i wanted to propose. If the canvas of the "plot area" is placed owning its own canvas in a layer above the axis canvas, the drawing issues would disappear. But this would require some i expect not trivial redisign.
Regards Horst