I am creating a XamChart with multiple background colors to represent visually if the current value is within a desired range. I create a ViewBox so that the control will resize itself and place a XamChart inside of the view box. I am using 3 area series to draw the 3 colored background ranges and then a line series to draw my data. The issue here is when the control resizes from being inside of the ViewBox, pixels for a given x-value are not repainted properly and I end up with vertical lines across the graph the same color as the Background property's brush. The graph looks fine once it gets to be a certain size, but as it becomes smaller, the vertical lines become visible. Setting the Background property is not a solution since that colors both the graph and a large rectangular area around the graph.
<Viewbox Name="m_oButtPressureContainer" Grid.Row="1" Grid.Column="2" VerticalAlignment="Bottom"> <Infragistics:XamChart Name="m_oButtPressureChart"> <Infragistics:XamChart.Legend> <Infragistics:Legend Visible="False"/> </Infragistics:XamChart.Legend> <Infragistics:XamChart.Axes> <Infragistics:Axis AxisType="PrimaryX" Minimum="0" Maximum="100" AutoRange="False" Unit="101" StrokeThickness="10"/> <Infragistics:Axis AxisType="PrimaryY" Minimum="0" Maximum="255" AutoRange="False" Unit="256" StrokeThickness="10"/> </Infragistics:XamChart.Axes> <Infragistics:XamChart.Series> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureUpperOutOfRangeSeries" StrokeThickness="0"/> <Infragistics:Series ChartType="Area" Fill="Green" Name="m_oButtPressureInRangeSeries" StrokeThickness="0"/> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureLowerOutOfRangeSeries" StrokeThickness="0"/> <Infragistics:Series ChartType="Line" Fill="Black" Name="m_oButtPressureDataSeries"/> </Infragistics:XamChart.Series> </Infragistics:XamChart> </Viewbox>
Given this:
<Viewbox Name="m_oButtPressureContainer" Grid.Row="1" Grid.Column="2" VerticalAlignment="Bottom"> <Infragistics:XamChart Name="m_oButtPressureChart"> <Infragistics:XamChart.Legend> <Infragistics:Legend Visible="False"/> </Infragistics:XamChart.Legend> <Infragistics:XamChart.Axes> <Infragistics:Axis AxisType="PrimaryX" Minimum="1" Maximum="10" AutoRange="False" Unit="101" StrokeThickness="10"/> <Infragistics:Axis AxisType="PrimaryY" Minimum="0" Maximum="20" AutoRange="False" Unit="256" StrokeThickness="10"/> </Infragistics:XamChart.Axes> <Infragistics:XamChart.Series> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureUpperOutOfRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="20" /> <Infragistics:DataPoint Label="1" Value="20" /> <Infragistics:DataPoint Label="2" Value="20" /> <Infragistics:DataPoint Label="3" Value="20" /> <Infragistics:DataPoint Label="4" Value="20" /> <Infragistics:DataPoint Label="5" Value="20" /> <Infragistics:DataPoint Label="5" Value="20" /> <Infragistics:DataPoint Label="6" Value="20" /> <Infragistics:DataPoint Label="7" Value="20" /> <Infragistics:DataPoint Label="8" Value="20" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Area" Fill="Green" Name="m_oButtPressureInRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="10" /> <Infragistics:DataPoint Label="1" Value="10" /> <Infragistics:DataPoint Label="2" Value="10" /> <Infragistics:DataPoint Label="3" Value="10" /> <Infragistics:DataPoint Label="4" Value="10" /> <Infragistics:DataPoint Label="5" Value="10" /> <Infragistics:DataPoint Label="6" Value="10" /> <Infragistics:DataPoint Label="7" Value="10" /> <Infragistics:DataPoint Label="8" Value="10" /> <Infragistics:DataPoint Label="9" Value="10" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureLowerOutOfRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="5" /> <Infragistics:DataPoint Label="1" Value="5" /> <Infragistics:DataPoint Label="2" Value="5" /> <Infragistics:DataPoint Label="3" Value="5" /> <Infragistics:DataPoint Label="4" Value="5" /> <Infragistics:DataPoint Label="5" Value="5" /> <Infragistics:DataPoint Label="6" Value="5" /> <Infragistics:DataPoint Label="7" Value="5" /> <Infragistics:DataPoint Label="8" Value="5" /> <Infragistics:DataPoint Label="9" Value="5" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Line" Fill="Black" Name="m_oButtPressureDataSeries"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="1" /> <Infragistics:DataPoint Label="1" Value="15" /> <Infragistics:DataPoint Label="2" Value="18" /> <Infragistics:DataPoint Label="3" Value="8" /> <Infragistics:DataPoint Label="4" Value="5" /> <Infragistics:DataPoint Label="5" Value="4" /> <Infragistics:DataPoint Label="6" Value="8" /> <Infragistics:DataPoint Label="7" Value="12" /> <Infragistics:DataPoint Label="8" Value="13" /> <Infragistics:DataPoint Label="9" Value="15" /> </Infragistics:Series.DataPoints> </Infragistics:Series> </Infragistics:XamChart.Series> </Infragistics:XamChart> </Viewbox>
Can you explain what I need to do to see the undesired behavior? What is your purpose of using the viewbox? Do you need the text/graphic size to increase along with the size of the chart? The chart can resize on its own to accomodate the change in size of its container.
-Graham
You should be able to see the bug with your code snippet. I copied and pasted your code into a new project, here is the entire xaml file: (sorry, I'm not sure how to insert a code snippet)
<Window x:Class="ChartTest.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Infragistics="clr-namespace:Infragistics.Windows.Chart;assembly=Infragistics3.Wpf.Chart.v10.1" Title="Window1" Height="300" Width="300"> <Viewbox Name="m_oButtPressureContainer" Grid.Row="1" Grid.Column="2" VerticalAlignment="Bottom"> <Infragistics:XamChart Name="m_oButtPressureChart"> <Infragistics:XamChart.Legend> <Infragistics:Legend Visible="False"/> </Infragistics:XamChart.Legend> <Infragistics:XamChart.Axes> <Infragistics:Axis AxisType="PrimaryX" Minimum="1" Maximum="10" AutoRange="False" Unit="101" StrokeThickness="10"/> <Infragistics:Axis AxisType="PrimaryY" Minimum="0" Maximum="20" AutoRange="False" Unit="256" StrokeThickness="10"/> </Infragistics:XamChart.Axes> <Infragistics:XamChart.Series> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureUpperOutOfRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="20" /> <Infragistics:DataPoint Label="1" Value="20" /> <Infragistics:DataPoint Label="2" Value="20" /> <Infragistics:DataPoint Label="3" Value="20" /> <Infragistics:DataPoint Label="4" Value="20" /> <Infragistics:DataPoint Label="5" Value="20" /> <Infragistics:DataPoint Label="5" Value="20" /> <Infragistics:DataPoint Label="6" Value="20" /> <Infragistics:DataPoint Label="7" Value="20" /> <Infragistics:DataPoint Label="8" Value="20" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Area" Fill="Green" Name="m_oButtPressureInRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="10" /> <Infragistics:DataPoint Label="1" Value="10" /> <Infragistics:DataPoint Label="2" Value="10" /> <Infragistics:DataPoint Label="3" Value="10" /> <Infragistics:DataPoint Label="4" Value="10" /> <Infragistics:DataPoint Label="5" Value="10" /> <Infragistics:DataPoint Label="6" Value="10" /> <Infragistics:DataPoint Label="7" Value="10" /> <Infragistics:DataPoint Label="8" Value="10" /> <Infragistics:DataPoint Label="9" Value="10" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureLowerOutOfRangeSeries" StrokeThickness="0"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="5" /> <Infragistics:DataPoint Label="1" Value="5" /> <Infragistics:DataPoint Label="2" Value="5" /> <Infragistics:DataPoint Label="3" Value="5" /> <Infragistics:DataPoint Label="4" Value="5" /> <Infragistics:DataPoint Label="5" Value="5" /> <Infragistics:DataPoint Label="6" Value="5" /> <Infragistics:DataPoint Label="7" Value="5" /> <Infragistics:DataPoint Label="8" Value="5" /> <Infragistics:DataPoint Label="9" Value="5" /> </Infragistics:Series.DataPoints> </Infragistics:Series> <Infragistics:Series ChartType="Line" Fill="Black" Name="m_oButtPressureDataSeries"> <Infragistics:Series.DataPoints> <Infragistics:DataPoint Label="0" Value="1" /> <Infragistics:DataPoint Label="1" Value="15" /> <Infragistics:DataPoint Label="2" Value="18" /> <Infragistics:DataPoint Label="3" Value="8" /> <Infragistics:DataPoint Label="4" Value="5" /> <Infragistics:DataPoint Label="5" Value="4" /> <Infragistics:DataPoint Label="6" Value="8" /> <Infragistics:DataPoint Label="7" Value="12" /> <Infragistics:DataPoint Label="8" Value="13" /> <Infragistics:DataPoint Label="9" Value="15" /> </Infragistics:Series.DataPoints> </Infragistics:Series> </Infragistics:XamChart.Series> </Infragistics:XamChart> </Viewbox> </Window>
When the graph is large, the lines are not visible. When you drag the corner of the window and resize it, you can begin to see vertical lines at the bottom of the graph when then graph becomes small.
I also tried removing the viewbox around the chart in my current code after reading your comment. The graph does resize fine without the viewbox around it and the vertical lines are not visible when I resize it. However, without the viewbox, the stroke thickness of the data series (line fill) does not resize with the control.
The area series, although it may look like one shape, is actually made up of several shapes, one per data point. This is because you can actually set a different color for each data point, if you so desire.
What you are probably seeing there is a pixel snapping artifact. If you have WPF do a render transform (or viewbox). It is having to resize the shapes to different sizes based on available space. At certain size levels you may end up with pixel overlap or underlap based on the rounding being performed and how the pixels are being snapped (or not) to the grid.
You may want to play with SnapToDevicePixels and LayoutRounding to see if you can produce the effect you want. If that doesn't help, I would recommend removing the Viewbox and instead scaling the StrokeThickness of the series based on the size you are displaying the chart. Outside of the viewbox I believe we are asserting that the shapes don't have any pixel overlap.
Hope this helps!
Hey Graham, I seem to be having the same issue with the StackedArea chart but I'm not using a viewbox. I went ahead and tried setting the MajorGridline and MajorTickMark visibility to false and that still didn't work. Normally, if I set my data source, create 5 separate stacked area series, I get something like this graph. Not exactly sure what property I'm missing or what i'm doing wrong. TIA