Line Color

11 posts, 0 answers
  1. g
    g avatar
    2 posts
    Member since:
    Dec 2008

    Posted 26 Dec 2008 Link to this post

    Hi
    Is there an example of how to set the color of LineSeriesDefinition?

    Thanks

    Ghassan
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 29 Dec 2008 Link to this post

    Hi g,

    RadChart uses the concept of style palettes in order to style the various data series. Each palette can contain as many style elements as you want -- the first style will be applied to the first line series, the second - to the second line series, etc.

    In order to customize the line color, you need to override the default palette associated with line series for the respective theme. Here is a sample code snippet that overrides the style for the first two line series and they are displayed in Lime and Bisque respectively (the rest of the styles are the default palette styles for the Summer theme):

    First you need to associate the xmlns mappings (on your root xml element)

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 

    XAML
    <Grid> 
        <Grid.Resources> 
            <telerik:StylesPalette x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:SummerTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyLineStyle}}"
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="Lime" /> 
                    <Setter Property="Fill" Value="Lime" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="Bisque" /> 
                    <Setter Property="Fill" Value="Bisque" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#99E4B030" /> 
                    <Setter Property="Fill" Value="#99E4B030" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#99328691" /> 
                    <Setter Property="Fill" Value="#99328691" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#99218264" /> 
                    <Setter Property="Fill" Value="#99218264" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#99D8653A" /> 
                    <Setter Property="Fill" Value="#99D8653A" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#99707070" /> 
                    <Setter Property="Fill" Value="#99707070" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#9942979F" /> 
                    <Setter Property="Fill" Value="#9942979F" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#993795A3" /> 
                    <Setter Property="Fill" Value="#993795A3" /> 
                </Style> 
                <Style TargetType="{x:Type Shape}" > 
                    <Setter Property="StrokeStartLineCap" Value="Round" /> 
                    <Setter Property="StrokeEndLineCap" Value="Round" /> 
                    <Setter Property="StrokeThickness" Value="4" /> 
                    <Setter Property="Stroke" Value="#990A9366" /> 
                    <Setter Property="Fill" Value="#990A9366" /> 
                </Style> 
     
            </telerik:StylesPalette> 
     
        </Grid.Resources> 
         
        <Grid.Background> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                <GradientStop Color="#FFDCE7FD" Offset="1"/> 
                <GradientStop Color="#FF898AAC" Offset="0"/> 
            </LinearGradientBrush> 
        </Grid.Background> 
     
        <telerik:RadChart x:Name="RadChart1" Grid.Row="1" Grid.Column="1" /> 
    </Grid> 

    Code-behind:
    private void FillSampleChartData() 
        for (int i = 0; i < 2; i++) 
        { 
            DataSeries lineSeries = new DataSeries(); 
            lineSeries.Definition = new LineSeriesDefinition(); 
            lineSeries.FillWithSampleData(); 
     
            this.RadChart1.DefaultView.ChartArea.DataSeries.Add(lineSeries); 
        } 


    Hope this helps.


    Regards,
    Manuel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for WPF is Visual Studio 2017 Ready
  4. David Huxtable
    David Huxtable avatar
    14 posts
    Member since:
    Mar 2009

    Posted 23 Mar 2009 Link to this post

    Good Afternoon Manuel,

    I have tried pasting the code into a new Visual Studio 2008 solution, yet the colours of the lines remain at their defaults.

    Is there something else I should do to achieve the goal of setting specific colours? I am to set the line colours to transparent so the graph simply looks like a scatter graph.

    Any help would be greatly appreciated.

    Thank you for your time Manuel,

    David
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 24 Mar 2009 Link to this post

    Hi David,

    With the latest version of the control (Q1 2009) we introduced much easier approach to style the most common visual properties via appearance shortcut API. These properties are series-specific and can be found under the SeriesDefinition.Appearance complex property for each 2D series:

    • Fill -- Gets or sets the brush that describes the fill for the corresponding chart series type.
    • Stroke -- Gets or sets the brush that describes the stroke for the corresponding chart series type (Note that for series that have no concept of Fill such as Line, Spline, Stick, etc. the Stroke value is the brush that defines the appearance of the whole visual segment).
    • Foreground -- Gets or sets a brush that describes the foreground color i.e. the color applied on text elements associated with the chart series like series item labels.
    • Cursor -- Gets or sets the mouse cursor that appears when the mouse pointer hovers over chart series item element.

    Here is a sample code snippet to get you started:

    using System.Windows; 
    using System.Windows.Media; 
    using Telerik.Windows.Controls.Charting; 
     
    namespace WpfApplication1 
        public partial class Window1 : Window 
        { 
            public Window1() 
            { 
                InitializeComponent(); 
     
                DataSeries series = new DataSeries() { new DataPoint(1, 20), new DataPoint(2, 15), new DataPoint(3, 25) }; 
                series.Definition = new LineSeriesDefinition(); 
                series.Definition.Appearance.Stroke = Brushes.Transparent; 
                 
                RadChart1.DefaultView.ChartArea.DataSeries.Add(series); 
            } 
        } 


    Hope this helps.

    Sincerely yours,
    Manuel
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  6. David Huxtable
    David Huxtable avatar
    14 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    Good Afternoon Manuel,

    You are an absolute legend mate!!!

    Not only was your response extremely quick, it was very detailed, telling me everything I needed to know and the example you attached was just what I was looking for. I will be able to achieve a lot from this.

    Thankyou again Manuel, you have made my day.

    David.
  7. David Huxtable
    David Huxtable avatar
    14 posts
    Member since:
    Mar 2009

    Posted 25 Mar 2009 Link to this post

    Good Afternoon Manuel,

    I'm sorry but I have another question regarding manipulating a line chart to make it look like a scatter chart.

    I was wondering how I could change the colour of the dots? Can it be done via styles? The reason I ask is if I have more than one series, the user won't be able to differenciate the series, as all the dots will be of the same colour and according to the legend, each series would be transparent, not even white, taking into account the line colour obviously.

    How can the colour set then be bound to the legend so the user can match the correct series?

    Lastly, is there a way to add some space at the end of the x-axis so the dot representing the end value on the x-axis is not cut off?

    I am sorry to trouble you Manuel, I believe these are my final issues.

    Thank you for your time yet again.

    David.
  8. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 25 Mar 2009 Link to this post

    Hello David,

    The approach you are trying to implement with Bubble chart (the other ticket) seems more appropriate for your desired scenario (you will automatically get different "dot" colors for separate series as well as automatic synchronization of the legend item appearance.

    However, if you need the series item labels you will need to tweak the LineChart a bit more.

    It is technically possible to customize the appearance of the dots (we call them point marks) for Line series, however there is no shortcut api like SeriesDefinition.Appearance.Stroke and this could be achieved via customizing the StylePalette collection responsible for the appearance of point marks (some more information on the concept of StylePalettes can be found here).

    Also if you choose the approach with customizing the LineChart, we would suggest you to re-template the Line series type and comment out the actual element that draws the line instead of using the shortuct visual API and set the line color to transparent as discussed in the previous message. In this way you will get automatic synchronization of the legend items as well (they will appear transparent otherwise as legend and series item color are automatically connected).

    As for the XAxis layout -- you can modify it like this to achieve the desired effect:
    RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside; 


    We have attached a runnable sample application that demonstrates all necessary customizations in place. Also, once again -- Scatter chart is in our TODO list and we will try to add it for the Q2 2009 release in July.

    Hope this helps.


    Best wishes,
    Manuel
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  9. Tad
    Tad avatar
    15 posts
    Member since:
    Jul 2007

    Posted 18 Nov 2009 Link to this post

    Manuel,

    Is there a similar way to set the color of a PointMark of a spline series in code behind?

    SplineSeries[0].Definition.Appearance.Stroke =

    Brushes.Black;

    ...works for the Spline itself, but not for the PointMark.


    Thanks!

    --Tad

     

     

  10. Tad
    Tad avatar
    15 posts
    Member since:
    Jul 2007

    Posted 18 Nov 2009 Link to this post

    Gee, Let's see how stupid I can be in public...

    How about:

    SplineSeries[0].Definition.Appearance.PointMark.Stroke =

    Brushes.Black;

     


    Sorry!

    --Tad
  11. Jackie
    Jackie avatar
    1 posts
    Member since:
    Dec 2010

    Posted 16 Dec 2010 Link to this post

    Hi Team,

    I'm looking for the same issue but in silverlight not wpf.

    Regards,

    JayKishan
  12. Evgeni "Zammy" Petrov
    Admin
    Evgeni "Zammy" Petrov avatar
    168 posts

    Posted 21 Dec 2010 Link to this post

    Hi Jaykishan,

     You can change the Stroke/Fill brush the same way in Silverlight as in WPF.
    Ted has already wrote how this is achieved.

    Maybe you have another issue that I have missed?

    Best regards,
    Evgeni "Zammy" Petrov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for WPF
Back to Top
UI for WPF is Visual Studio 2017 Ready