[Solved] Very large (width) chart renders with aliasing

[Nathanael]

Hi,

Here's a repro app : a long table of values (200 values=8000pixels) that I can horizontally scroll.
I'd like to put below a chart using those figures. Everything works great except that it renders poorly : my series is totally aliased with the stretching.

<ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Disabled">
    <StackPanel>
        <ItemsControl x:Name="Items" ItemsSource="{Binding Path=DataSource}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Width="40">
                        <TextBlock Text="{Binding Path=Category}" />
                        <TextBlock Text="{Binding Path=Value}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        <chart:RadCartesianChart>
            <chart:RadCartesianChart.HorizontalAxis>
                <chart:CategoricalAxis />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:AreaSeries ItemsSource="{Binding Path=DataSource}">
                <chart:AreaSeries.VerticalAxis>
                    <chart:LinearAxis Minimum="0" Maximum="100" Visibility="Collapsed" />
                </chart:AreaSeries.VerticalAxis>
                <chart:AreaSeries.CategoryBinding>
                    <chart:PropertyNameDataPointBinding PropertyName="Category" />
                </chart:AreaSeries.CategoryBinding>
                <chart:AreaSeries.ValueBinding>
                    <chart:PropertyNameDataPointBinding PropertyName="Value" />
                </chart:AreaSeries.ValueBinding>
            </chart:AreaSeries>
        </chart:RadCartesianChart>
        <TextBlock Text="{Binding Path=ActualWidth, ElementName=Items}"/>
    </StackPanel>
</ScrollViewer>

 

What can I do make it work correctly ?

[Tsvyatko]

Hello Nathanael,

Thank you for sending us code snippet and screenshot describing the issue you are facing!

We have reviewed the scenario you are trying to achieve and the result you are currently getting. Due to the fact that RadChart uses Microsoft Path primitive to display its points it has the same limitations as the primitive itself.

Depending on the scenario you are trying to achieve you might want to utilize Chart PanAndZoom Behavior. It will enable render of large data onto the chart and provide ability for UI virtualization, Pan Zoom in/out. More information regarding its usage can be found here - http://docs.telerik.com/windows-universal/controls/radchart/behaviors/chartpanandzoombehavior

Please have a look and let us know if this helps.

Regards,
Tsvyatko
Telerik