This is a migrated thread and some comments may be shown as answers.

Line Color

10 Answers 644 Views
Chart
This is a migrated thread and some comments may be shown as answers.
g
Top achievements
Rank 1
g asked on 26 Dec 2008, 11:28 AM
Hi
Is there an example of how to set the color of LineSeriesDefinition?

Thanks

Ghassan

10 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 29 Dec 2008, 12:58 PM
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.
0
David Huxtable
Top achievements
Rank 1
answered on 24 Mar 2009, 03:22 AM
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
0
Giuseppe
Telerik team
answered on 24 Mar 2009, 08:26 AM
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.
0
David Huxtable
Top achievements
Rank 1
answered on 24 Mar 2009, 08:38 AM
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.
0
David Huxtable
Top achievements
Rank 1
answered on 25 Mar 2009, 05:38 AM
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.
0
Giuseppe
Telerik team
answered on 25 Mar 2009, 11:42 AM
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.
0
Tad
Top achievements
Rank 1
answered on 18 Nov 2009, 03:20 PM
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

 

 

0
Tad
Top achievements
Rank 1
answered on 18 Nov 2009, 03:34 PM
Gee, Let's see how stupid I can be in public...

How about:

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

Brushes.Black;

 


Sorry!

--Tad
0
Jackie
Top achievements
Rank 1
answered on 16 Dec 2010, 05:18 PM
Hi Team,

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

Regards,

JayKishan
0
Evgeni "Zammy" Petrov
Telerik team
answered on 21 Dec 2010, 05:32 PM
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
Tags
Chart
Asked by
g
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
David Huxtable
Top achievements
Rank 1
Tad
Top achievements
Rank 1
Jackie
Top achievements
Rank 1
Evgeni "Zammy" Petrov
Telerik team
Share this question
or