Bind the series color to the axis in RadCartesianChart

2 posts, 0 answers
  1. Yue
    Yue avatar
    1 posts
    Member since:
    Apr 2014

    Posted 23 Apr 2014 Link to this post


    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}">
    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>
    25.    <telerik:RadCartesianChart.HorizontalAxis>
    26.        <telerik:DateTimeContinuousAxis />
    27.    </telerik:RadCartesianChart.HorizontalAxis>
    29.    <telerik:RadCartesianChart.VerticalAxis>
    30.        <telerik:LinearAxis />
    31.    </telerik:RadCartesianChart.VerticalAxis>

    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!
  2. Petar Marchev
    Petar Marchev avatar
    996 posts

    Posted 23 Apr 2014 Link to this post

    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.

    Petar Marchev
    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.
Back to Top