How to change location of Legends & Have scrolling only for chart and not legend

[Yusuf]

Hi,

In the implementation that I have the chart has lots of data points and hence i have implemented a scroll viewer which allows user to scroll horizontally. I wanted to change the location of the default chart legends which is always shown at the rightmost end to appear at the bottom.

This is the default view that we get

ChartTitle
Chart   ChartLegend

I want it like
ChartTitle
Chart
ChartLegend

Also is it possible to just scroll the chart view and keep the title and legend at fixed location, i.e instead of having all three in scroll viewer have only Chart in the scroll viewer? Here is the current code that I have

<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="1">
            <telerikChart:RadChart x:Name="SeriesChart" >
                <telerikChart:RadChart.LegendStyle>
                    <Style TargetType="Chart:ChartLegend">
                        <Setter Property="ItemsPanel" >
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerikChart:RadChart.LegendStyle>
            </telerikChart:RadChart>  
        </ScrollViewer>

I don't want to have a new Chart Area added, i want to use the default view because of custom series mapping that i have in the code behind.
I want to achieve a view like this?
ChartTitle
<ScrollViewer>
Chart
<ScrollViewer>
ChartLegend
Thanks & Regards,
Yusuf

[Yusuf]

Okie, here is what i did
<telerikChart:RadChart x:Name="SeriesChart" UseDefaultLayout="False" Grid.Row="0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="8*" />
                        <RowDefinition Height="1*" />
                    </Grid.RowDefinitions>
                    
                    <Grid.Resources>
                        <ResourceDictionary>
                            <Style x:Key="MyCustomLegendStyle" TargetType="Chart:ChartLegend">
                                <Setter Property="ItemsPanel" >
                                    <Setter.Value>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal" />
                                        </ItemsPanelTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ResourceDictionary>
                    </Grid.Resources>

                    <Chart:ChartLegend x:Name="ChartLegend1" Header="Legend"
                                 Grid.Row="2" Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left"/>

                <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
                    <Chart:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1"/>
                </ScrollViewer>
                    
                <Chart:ChartTitle Grid.Row="0" x:Name="ChartTitle1"
                                VerticalAlignment="Top" HorizontalAlignment="Left"/>
                </Grid>
            </telerikChart:RadChart>

But the problem now is I am not able to see anything in the Legend or the Title after setting some value from code behind. Whatever series I plot are shown on the chart but no legend and no title. Also the horizontal scroll bar is not visible any more...

[Yusuf]

Any Ideas? If someone can post some sample xaml to help...

Thanks & Regards,
Yusuf Nazami

[Yusuf]

Hi,

Finally I got the legend and the title arranged as I want it but surprisingly still the scroll viewer is not appaearing as the data points grow.

Here is the XAML, can I have a solution to this scrolling problem for the chart?

<Grid x:Name="LayoutRoot" Background="White">

            <telerikChart:RadChart x:Name="SeriesChart" UseDefaultLayout="False" telerikDragDrop:RadDragAndDropManager.AllowDrop="True">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1.5*" />
                        <RowDefinition Height="7*" />                        
                    </Grid.RowDefinitions>
                    <Grid.Resources>
                        <ResourceDictionary>
                            <Style x:Key="MyCustomLegendStyle" TargetType="Chart:ChartLegend">
                                <Setter Property="ItemsPanel" >
                                    <Setter.Value>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal" />
                                        </ItemsPanelTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ResourceDictionary>
                    </Grid.Resources>

                <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Grid.Row="1" >
                    <Chart:ChartArea x:Name="ChartArea1" LegendName="ChartLegend1" Grid.Row="1" />
                </ScrollViewer>
                
                    <StackPanel Orientation="Horizontal"  Grid.Row="0">
                    <Chart:ChartTitle  x:Name="ChartTitle1"
                                VerticalAlignment="Top" HorizontalAlignment="Left" />
                    
                        <Chart:ChartLegend x:Name="ChartLegend1"
                                 Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left" />
                   
                    </StackPanel>
                </Grid>
            </telerikChart:RadChart>

Thanks & Regards,
Yusuf Nazami

[Vladimir Milev]

Hello Yusuf,

When the points grow they get less wide to fit in the space allotted. The ChartArea will not grow in size and will now cause the ScrollViewer to trigger its scrollbars.

All the best,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[tran ai]

Thank you for your solution, but I do the same like you and no data will be shown in the screen. Do you have any idea?

[Vladimir Milev]

Hi guys,

We have some new legend functionality available now. Check it out here.

All the best,
Vladimir Milev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.