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

Bind the series color to the axis in RadCartesianChart

1 Answer 105 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Yue
Top achievements
Rank 1
Yue asked on 23 Apr 2014, 06:11 AM
Hi,

I used RadCartesianChart with a custom palette and I want to bind the color of the series to the axis. Here is (part of) my XAML:

01.<telerik:RadCartesianChart x:Name="Chart" Palette="{StaticResource ChartPalette}">
02. 
03.    <telerik:RadCartesianChart.SeriesProvider>
04.        <telerik:ChartSeriesProvider Source="{Binding SeriesProvider, ElementName=Control}">
05.            <telerik:ChartSeriesProvider.SeriesDescriptors>
06.                <telerik:CategoricalSeriesDescriptor ItemsSourcePath="ItemsSource" CategoryPath="Time" ValuePath="Value">
07.                    <telerik:CategoricalSeriesDescriptor.Style>
08.                        <Style TargetType="{x:Type telerik:LineSeries}">
09.                            <Style.Triggers>
10.                                <DataTrigger Binding="{Binding UseLogarithmicAxis}" Value="True">
11.                                    <Setter Property="VerticalAxis">
12.                                        <Setter.Value>
13.                                            <telerik:LogarithmicAxis HorizontalLocation="Right" LineStroke="{Binding LogarithmicAxisBrush}" />
14.                                        </Setter.Value>
15.                                    </Setter>
16.                                </DataTrigger>
17.                            </Style.Triggers>
18.                        </Style>
19.                    </telerik:CategoricalSeriesDescriptor.Style>
20.                </telerik:CategoricalSeriesDescriptor>
21.            </telerik:ChartSeriesProvider.SeriesDescriptors>
22.        </telerik:ChartSeriesProvider>
23.    </telerik:RadCartesianChart.SeriesProvider>
24. 
25.    <telerik:RadCartesianChart.HorizontalAxis>
26.        <telerik:DateTimeContinuousAxis />
27.    </telerik:RadCartesianChart.HorizontalAxis>
28.     
29.    <telerik:RadCartesianChart.VerticalAxis>
30.        <telerik:LinearAxis />
31.    </telerik:RadCartesianChart.VerticalAxis>
32. 
33.</telerik:RadCartesianChart>

You can see that on line 13, I used a dependency property LogarithmicAxisBrush, which I will set the value in the code, as a workaround. But I want to bind the color of the series to the axis.

Thank you!

1 Answer, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 23 Apr 2014, 08:41 AM
Hello Yue,

Unfortunately we have not created such a vivid series-axis link which would allow you to directly bind the brushes. All solutions will require some extra work.

One way to go is​ to plug in legend settings. The legend settings will make the chart produce legend items in the LegendItems collection. Each legend item has a MarkerFill and MarkerStroke properties which are the colors used by the series. So you can attach a handler to the collection changed event of the LegendItems and iterate the items and set the brushes as needed (you can get the series from the Presenter property and get the axis from the VerticalAxis property).

Another solution would be to not use a palette. You can then create a new property in your business object which will carry the series' brush and set the Stroke of the series in the style, and also set the ElementBrush property of the axis.

Another way to go is just what you did : )

However, I will suggest that you reconsider using the series provider. If you have a new axis for each series, you probably do not have that many series (otherwise the chart will get cluttered). If you know the number of series in advance, I suggest you do not use the series provider. Then you can simply set the Stroke and ElementBrush in XAML. Let us know if we can assist you further.

Regards,
Petar Marchev
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
ChartView
Asked by
Yue
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Share this question
or