Title for lines in RadCartesianChart

4 posts, 0 answers
  1. Iurii
    Iurii avatar
    5 posts
    Member since:
    Jan 2014

    Posted 24 Mar 2015 Link to this post

    Hello Telerik Team,

    I am trying to use RadCartesianChart with few lines. I displayed the lines on RadCartesianChart and added RadLegend to display line names. But the color is the same for each lines.

    So my question is How can I add unique color for every line? Or How can I add title for every line (like attached NamedLines.jpg) with some set of colors (can be repeated)?

    Thank you,
    Iurii.



  2. Milena
    Admin
    Milena avatar
    201 posts

    Posted 25 Mar 2015 Link to this post

    Hi Iurii,

    You can easily add unique color to each series by using Palette property of chartview or you can even create a custom palettes. 

    As for the Legend - you can add different titles for each series in the SeriesLegendSettings. More about how to implement the legend in the chartview you can find in our help topic RadLegend Support

    I hope this information is helpful. 

    Regards,
    Milena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Iurii
    Iurii avatar
    5 posts
    Member since:
    Jan 2014

    Posted 25 Mar 2015 in reply to Milena Link to this post

    Hi Milena,

    I tried to use custom palettes but lines disappeared from RadCartesianChart.

    <Window x:Class="RadCartesianChartWithNamedMultipleLines.MainWindow"<br>        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br>        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<br>        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"<br>        Title="MainWindow" Height="550" Width="925"><br>    <Window.Resources><br>        <telerik:ChartPalette x:Key="customPalette"><br>            <telerik:ChartPalette.SeriesEntries><br><br>                <telerik:PaletteEntryCollection SeriesFamily="Pie"><br>                    <telerik:PaletteEntry Fill="#FF1FAFD3" Stroke="White"/><br>                    <telerik:PaletteEntry Fill="#FFC32E0A" Stroke="White"/><br>                    <telerik:PaletteEntry Fill="#FFFA6F5E" Stroke="White"/><br>                </telerik:PaletteEntryCollection><br>                <telerik:PaletteEntryCollection SeriesFamily="Bar"><br>                    <telerik:PaletteEntry Fill="#FF006968" Stroke="White"/><br>                    <telerik:PaletteEntry Fill="#FF7A6CC4" Stroke="White"/><br>                    <telerik:PaletteEntry Fill="#FF1FAFD3" Stroke="White"/><br>                </telerik:PaletteEntryCollection><br>            </telerik:ChartPalette.SeriesEntries><br><br>            <telerik:ChartPalette.GlobalEntries><br>                <telerik:PaletteEntry Fill="#FF21B573" Stroke="White" /><br>                <telerik:PaletteEntry Fill="#FF88CA2A" Stroke="White" /><br>                <telerik:PaletteEntry Fill="#FFFF921E" Stroke="White" /><br>            </telerik:ChartPalette.GlobalEntries><br><br>        </telerik:ChartPalette><br>    </Window.Resources><br>    <Grid ><br>        <Grid.ColumnDefinitions><br>            <ColumnDefinition Width="*" /><br>            <ColumnDefinition Width="5" /><br>            <ColumnDefinition Width="Auto" /><br>        </Grid.ColumnDefinitions><br><br>        <telerik:RadCartesianChart x:Name="RadCartesianChart" Palette="{StaticResource customPalette}" HorizontalAlignment="Stretch"><br>            <telerik:RadCartesianChart.HorizontalAxis><br>                <telerik:DateTimeContinuousAxis LabelFitMode="MultiLine" Title="Time/Date"<br>                                                            LabelFormat="dd/MM/yyyy" /><br>            </telerik:RadCartesianChart.HorizontalAxis><br><br>            <telerik:RadCartesianChart.VerticalAxis><br>                <telerik:LinearAxis HorizontalAlignment="Right" Title="Price" /><br>            </telerik:RadCartesianChart.VerticalAxis><br><br>            <telerik:RadCartesianChart.SeriesProvider><br>                <telerik:ChartSeriesProvider Source="{Binding Path=Products}"><br>                    <telerik:ChartSeriesProvider.SeriesDescriptors><br><br>                        <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Prices"<br>                                                                         ValuePath="Value"<br>                                                                         CategoryPath="DateTime"><br>                            <telerik:CategoricalSeriesDescriptor.Style><br>                                <Style TargetType="{x:Type telerik:SplineSeries}"><br>                                    <Setter Property="ShowLabels" Value="False" /><br>                                    <Setter Property="LegendSettings"><br>                                        <Setter.Value><br>                                            <telerik:SeriesLegendSettings Title="{Binding Path=Name}" /><br>                                        </Setter.Value><br>                                    </Setter><br>                                </Style><br>                            </telerik:CategoricalSeriesDescriptor.Style><br>                        </telerik:CategoricalSeriesDescriptor><br>                    </telerik:ChartSeriesProvider.SeriesDescriptors><br>                </telerik:ChartSeriesProvider><br>            </telerik:RadCartesianChart.SeriesProvider><br>        </telerik:RadCartesianChart><br><br>        <ScrollViewer Grid.Column="2" HorizontalScrollBarVisibility="Auto"<br>                                  VerticalScrollBarVisibility="Auto" Width="200"><br>            <telerik:RadLegend Items="{Binding ElementName=RadCartesianChart, Path=LegendItems}" /><br>        </ScrollViewer><br>    </Grid><br></Window>

    What is wrong?

    Thank you,
    Iurii.
  5. Milena
    Admin
    Milena avatar
    201 posts

    Posted 26 Mar 2015 Link to this post

    Hi Iurii,

    The LineSeries are actually Path, so you should set their Stroke property. In the custom palette you sent the Stoke is White and that is the reason you can not see the series. So you can change it to:
    <telerik:ChartPalette x:Key="customPalette">
                <telerik:ChartPalette.SeriesEntries>
                    <telerik:PaletteEntryCollection SeriesFamily="Line">
                        <telerik:PaletteEntry Stroke="Red"/>
                        <telerik:PaletteEntry Stroke="Yellow"/>
                        <telerik:PaletteEntry Stroke="Green"/>
                    </telerik:PaletteEntryCollection>
                </telerik:ChartPalette.SeriesEntries>
    ...

    Please let us know in case any further assistance is needed.

    Regards,
    Milena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top