Bind the series color to the axis in RadCartesianChart

[Yue]

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!

[Petar Marchev]

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