Change chart color

6 posts, 0 answers
  1. Fernando
    Fernando avatar
    4 posts
    Member since:
    Mar 2012

    Posted 01 Mar 2012 Link to this post

    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>

  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 02 Mar 2012 Link to this post

    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 >>
  3. DevCraft banner
  4. Fernando
    Fernando avatar
    4 posts
    Member since:
    Mar 2012

    Posted 02 Mar 2012 Link to this post

    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>

  5. Fernando
    Fernando avatar
    4 posts
    Member since:
    Mar 2012

    Posted 06 Mar 2012 Link to this post

    Hi Sia!

    Doesn´t work...
    Can you help me?
  6. Sia
    Admin
    Sia avatar
    667 posts

    Posted 07 Mar 2012 Link to this post

    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 >>
  7. Fernando
    Fernando avatar
    4 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2012 Link to this post

    Hi Sia,

    It worked! Thank you in advance.

    Regards,
    Fernando
Back to Top
DevCraft banner