Scrollable Legend in C1Chart

Chart control is popularly used in various domains to analyze data. They are often used to ease understanding of large quantities of data and the relationships between parts of the data. An important part of a Chart control is the Legend. It is used to provide information about the DataSeries shown on the chart area. The Chart Legend has Header, usually some text and items - one for each chart series. C1Chart for Silverlight provides these features as well for their users. Adding a Legend object to a Chart control automatically generates the legend items for the DataSeries. However, the display of all the Legend items are restricted to the height of the Legend object. If the height is too small to accommodate all the Legend entries, they will be truncated from the view. This blog provides a small XAML implementation with C1Chart for Silverlight to include a Scrollbar in the Legend, so that user can scroll through all the Legend items. Use the following XAML implementation for the same.

<c1:C1Chart x:Name="chart" ChartType="Line">  
   <c1:C1Chart.View>  
      <c1:ChartView>  
         <c1:ChartView.AxisX>  
           <c1:Axis Title="Year" MajorGridStroke="Transparent"/>  
           </c1:ChartView.AxisX>  
          <c1:ChartView.AxisY>  
          <c1:Axis Title="Quarterly Sales (in $1,000)" MajorGridStroke="#40000000" AnnoFormat="n0" />  
          </c1:ChartView.AxisY>  
            </c1:ChartView>  
          </c1:C1Chart.View>  

          <c1:C1Chart.Data>  
            <c1:ChartData ItemNames="P1 P2 P3 P4 P5">  
              <c1:DataSeries Label="s1" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="1" ChartType="Bar"/>  
             <c1:DataSeries Label="s2" Values="8, 12, 10, 12, 15" />  
             <c1:DataSeries Label="s3" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="2" />  
             <c1:DataSeries Label="s4" Values="8, 12, 10, 12, 15" />  
             <c1:DataSeries Label="s5" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="3" ChartType="Bar"/>  
             <c1:DataSeries Label="s6" Values="8, 12, 10, 12, 15" />  
             <c1:DataSeries Label="s7" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="4" />  
             <c1:DataSeries Label="s8" Values="8, 12, 10, 12, 15" />  
             <c1:DataSeries Label="s9" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="5" />  
                    <c1:DataSeries Label="s10" Values="8, 12, 10, 12, 15" />  
                    <c1:DataSeries Label="s11" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="6" ChartType="Bar"/>  
                    <c1:DataSeries Label="s12" Values="8, 12, 10, 12, 15" />  
                    <c1:DataSeries Label="s13" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="7" />  
                    <c1:DataSeries Label="s14" Values="8, 12, 10, 12, 15" />  
                    <c1:DataSeries Label="s15" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="8" />  
                    <c1:DataSeries Label="s16" Values="8, 12, 10, 12, 15" ChartType="Bar"/>  
                </c1:ChartData>  

            </c1:C1Chart.Data>  

            <c1:C1ChartLegend Height="100">  
                <c1:C1ChartLegend.Template>  
                    <ControlTemplate TargetType="c1:C1ChartLegend">  
                        <Border Name="bdr"  
                            Background="{TemplateBinding Background}"  
                            BorderBrush="{TemplateBinding BorderBrush}"  
                            BorderThickness="{TemplateBinding BorderThickness}"  
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"  
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"  
                            Padding="{TemplateBinding Padding}"  
                            CornerRadius="{TemplateBinding CornerRadius}">  
                            <Grid>  
                                <ContentControl Foreground="{TemplateBinding Foreground}" x:Name="title" HorizontalContentAlignment="Center" Content="{TemplateBinding Title}" />  
                                <ScrollViewer x:Name="sv" BorderThickness="0" VerticalScrollBarVisibility="Auto">  
                                    <ItemsPresenter />  
                                </ScrollViewer>  
                            </Grid>  
                        </Border>  
                    </ControlTemplate>  

                </c1:C1ChartLegend.Template>  
            </c1:C1ChartLegend>  
        </c1:C1Chart>  

Download Sample