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

[Solved] Change chart color

5 Answers 132 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 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

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.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:ChartArea.AxisY>

<telerik:ChartArea.AnimationSettings>

<telerik:AnimationSettings/>

</telerik:ChartArea.AnimationSettings>

</telerik:ChartArea>

</telerik:ChartDefaultView.ChartArea>

</telerik:ChartDefaultView>

</telerik:RadChart.DefaultView>

</telerik:RadChart>

</Border>

</Grid>

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 >>