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

Change chart color

5 Answers 102 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Fernando
Top achievements
Rank 1
Fernando asked on 01 Mar 2012, 02:56 PM
Hi,

How can I change the main line color of my chart? I'm using Spline chart.

thank you
My control:
<Grid x:Name="LayoutRoot" Height="500" Width="985">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.54*"/>
            <ColumnDefinition Width="0.46*"/>
        </Grid.ColumnDefinitions>          
        <Border Grid.ColumnSpan="2">
            <telerik:RadChart x:Name="RadChart" ItemsSource="{Binding ListChartDetails}" Background="{x:Null}"  UseLayoutRounding="False" d:LayoutRounding="Auto" Height="490"  AxisForeground="White" Foreground="Black" >
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>                                            
                        <telerik:SeriesMapping.SeriesDefinition>       
                            <telerik:SplineSeriesDefinition ShowItemLabels="True" ShowPointMarks="true" ItemLabelFormat="0ms" ShowItemToolTips="true" >                                                                                        
                                <telerik:SplineSeriesDefinition.InteractivitySettings>                                                                                                         
                                    <telerik:InteractivitySettings  SelectionMode="Single" SelectionScope="Item" HoverScope="Item"   />                                                                    
                                </telerik:SplineSeriesDefinition.InteractivitySettings>                            
                            </telerik:SplineSeriesDefinition>                                                      
                        </telerik:SeriesMapping.SeriesDefinition>                       
                        <telerik:ItemMapping DataPointMember="XCategory" FieldName="LNK_MNT_RSP_DATETIME"  />
                        <telerik:ItemMapping DataPointMember="YValue" FieldName="LNK_MNT_RSP_RT_AVR"  />
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                <telerik:RadChart.DefaultView>                     
                    <telerik:ChartDefaultView>                       
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="legend1" Visibility="Collapsed"/>
                    </telerik:ChartDefaultView.ChartLegend>                
                        <telerik:ChartDefaultView.ChartArea>                                                                                                           
                            <telerik:ChartArea    NoDataString="Data" Background="{x:Null}" Margin="-4,-1,4,10"  Height="490" SmartLabelsEnabled="True"  >                                                                 
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX/>                                   
                                </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>                                                                              
                                    <telerik:AxisY Title="Time" DefaultLabelFormat="0(ms)" AutoRange="False" Step="10" MinValue="0" MaxValue="100"   MinorGridLinesVisibility="Collapsed" MinorTicksVisibility="Collapsed" PlotAreaAxisLabelsVisibility="Collapsed" PlotAreaAxisVisibility="Collapsed" StripLinesVisibility="Collapsed" />
                            </telerik:ChartArea.AxisY
                                <telerik:ChartArea.AnimationSettings>
                                    <telerik:AnimationSettings/>
                                </telerik:ChartArea.AnimationSettings>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Border>
    </Grid>

5 Answers, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 02 Mar 2012, 03:34 PM
Hi Fernando,

You can use the exposed Palette functionality as described here. Please try it and let us know how it works on your end.

Kind regards,
Sia
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Fernando
Top achievements
Rank 1
answered on 02 Mar 2012, 06:17 PM
Hi Sia!

Doesn´t work...
I inserted the code style on top. Did I right?

Thank You,
Fernando
<Style x:Key="SplineAreaStyle"
       TargetType="telerik:SelfDrawingSeries">
    <Setter Property="BorderLineStyle">
        <Setter.Value>
            <Style TargetType="Shape">
                <Setter Property="Stroke"
                        Value="Orange" />
                <Setter Property="StrokeThickness"
                        Value="3" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>
<Grid x:Name="LayoutRoot" Height="500" Width="985">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.54*"/>
            <ColumnDefinition Width="0.46*"/>
        </Grid.ColumnDefinitions>          
        <Border Grid.ColumnSpan="2">
            <telerik:RadChart x:Name="RadChart" ItemsSource="{Binding ListChartDetails}" Background="{x:Null}"  UseLayoutRounding="False" d:LayoutRounding="Auto" Height="490"  AxisForeground="White" Foreground="Black" >
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>                                          
                        <telerik:SeriesMapping.SeriesDefinition>       
                            <telerik:SplineSeriesDefinition ShowItemLabels="True" ShowPointMarks="true" ItemLabelFormat="0ms" ShowItemToolTips="true" >                                                                                        
                                <telerik:SplineSeriesDefinition.InteractivitySettings>                                                                                                        
                                    <telerik:InteractivitySettings  SelectionMode="Single" SelectionScope="Item" HoverScope="Item"   />                                                                   
                                </telerik:SplineSeriesDefinition.InteractivitySettings>                            
                            </telerik:SplineSeriesDefinition>                                                      
                        </telerik:SeriesMapping.SeriesDefinition
            <telerik:ItemMapping DataPointMember="XCategory" FieldName="LNK_MNT_RSP_DATETIME"  />
                        <telerik:ItemMapping DataPointMember="YValue" FieldName="LNK_MNT_RSP_RT_AVR"  />
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="legend1" Visibility="Collapsed"/>
                    </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea    NoDataString="Data" Background="{x:Null}" Margin="-4,-1,4,10"  Height="490" SmartLabelsEnabled="True"  >
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX/>
                                </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>                                                                              
                                    <telerik:AxisY Title="Time" DefaultLabelFormat="0(ms)" AutoRange="False" Step="10" MinValue="0" MaxValue="100"   MinorGridLinesVisibility="Collapsed" MinorTicksVisibility="Collapsed" PlotAreaAxisLabelsVisibility="Collapsed" PlotAreaAxisVisibility="Collapsed" StripLinesVisibility="Collapsed" />
                            </telerik:ChartArea.AxisY
                                <telerik:ChartArea.AnimationSettings>
                                    <telerik:AnimationSettings/>
                                </telerik:ChartArea.AnimationSettings>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Border>
    </Grid>

0
Fernando
Top achievements
Rank 1
answered on 06 Mar 2012, 02:25 PM
Hi Sia!

Doesn´t work...
Can you help me?
0
Sia
Telerik team
answered on 07 Mar 2012, 05:45 PM
Hello Fernando,

In my previous answer my point was to try the following approach:
<telerikChart:RadChart x:Name="radChart">
    <telerikChart:RadChart.PaletteBrushes>
        <SolidColorBrush Color="Green" />
        <SolidColorBrush Color="Orange" />
    </telerikChart:RadChart.PaletteBrushes>
</telerikChart:RadChart>
 
Please try it and if it does not work send me a small runnable project where the unexpected behavior can be observed. Thank you in advance.

Regards,
Sia
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Fernando
Top achievements
Rank 1
answered on 15 Mar 2012, 01:55 PM
Hi Sia,

It worked! Thank you in advance.

Regards,
Fernando
Tags
Chart
Asked by
Fernando
Top achievements
Rank 1
Answers by
Sia
Telerik team
Fernando
Top achievements
Rank 1
Share this question
or