How to Wrap Legends in Lineseries Chart?

[Q. Xu]

I want to add many Lineseries in SfChart and set their Label too. It looks like that SfChart.Legend displays all legends in one line and does not wrap them. How can I wrap the legends? Thanks very much!
Attachment: Legend_Chart_76cbe07.zip

[Karthikeyan V]

Dear Customer,

 

Thank you for using Syncfusion products.

 

We have analysed the reported requirement. You can achieve your requirement by setting the custom panel in legend items panel.

 

Code snippet [XAML]:

 

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    

  <chart:ChartLegend.ItemsPanel>

             <ItemsPanelTemplate>

                     <toolkit:WrapPanel Orientation="Horizontal" />

             </ItemsPanelTemplate>

  </chart:ChartLegend.ItemsPanel>

 

Note: please install the windows phone toolkit in your machine , then only we can use the wrap panel. Please follow instruction for installation in provided link:

 

http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/20/windows-phone-toolkit-overview.aspx

 

Please let us know if you require further assistance on this.

 

Thanks,

Karthikeyan V.

[Q. Xu]

Thanks very much. It works perfectly.

[Q. Xu]

I have another question. It looks there are only Ten colors for Legend/LineSeries. If there are more than ten Legends/LineSerieses, some Legends/LineSerieses have the same color and can not be distinguished. Any idea? Thanks very much!

[Karthikeyan V]

Dear customer,

Thanks for the update.

We have analysed the report requirement. You can achieve by setting the Interior property in each series and this interior property reflect to legend also.

Code snippet [XAML]:

<chart:FastLineBitmapSeries Interior="Green" />

<chart:FastLineBitmapSeries Interior="Blue" />

Please let us know if you require further assistance on this.

Thanks,

Karthikeyan V.

[Karthikeyan V]

Dear customer,

We can also able to achieve this requirement with help of ColorModel property in SfChart. Please find the code snippet about this.

Code Snippet [XAML]:

<chart:SfChart Palette="Custom" ">

            <chart:SfChart.ColorModel>

                <chart:ChartColorModel>

                    <chart:ChartColorModel.CustomBrushes>

                        <SolidColorBrush Color="#F02B2C"/>

                        <SolidColorBrush Color="#FF3B5C"/>

                        <SolidColorBrush Color="#F16B3C"/>

                        <SolidColorBrush Color="#FF6B6C"/>

                        <SolidColorBrush Color="#F0FB8C"/>

                        <SolidColorBrush Color="#F02B2C"/>

                        <SolidColorBrush Color="#FF3B5C"/>

                        <SolidColorBrush Color="#F36B3C"/>

                        <SolidColorBrush Color="#F4FB6C"/>

                        <SolidColorBrush Color="#F56B8C"/>

                    </chart:ChartColorModel.CustomBrushes>

                </chart:ChartColorModel>

            </chart:SfChart.ColorModel>

Please let us know if you require further assistance on this.

Thanks,

Karthikeyan V.