Changing Area Series Fill Opacity Within A ChartSeries Provider

2 posts, 0 answers
  1. Michael
    Michael avatar
    4 posts
    Member since:
    Jul 2013

    Posted 26 Aug 2013 Link to this post

    I'm in need of having a dynamic number of area series overlap each other in a meaningful way, and therefor I'm attempting to track down a way to set the areaseries fill property's opacity property, I have not yet been successful in any way shape or form to do so. The Xaml is shown below, any aid is greatly appreciated.

    <telerik:RadCartesianChart DockPanel.Dock="Bottom" x:Name="UnderWaterEquityCurve" Palette="Windows8">
                                        <telerik:RadCartesianChart.Grid>
                                            <telerik:CartesianChartGrid MajorLinesVisibility="Y"/>
                                        </telerik:RadCartesianChart.Grid>
                                        <telerik:RadCartesianChart.Behaviors>
                                            <telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Horizontal"/>
                                        </telerik:RadCartesianChart.Behaviors>
                                        <telerik:RadCartesianChart.HorizontalAxis>
                                            <telerik:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="dd/MM/yy"/>
                                        </telerik:RadCartesianChart.HorizontalAxis>
                                        <telerik:RadCartesianChart.VerticalAxis>
                                            <telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>
                                        </telerik:RadCartesianChart.VerticalAxis>
                                        <telerik:RadCartesianChart.SeriesProvider>
                                            <telerik:ChartSeriesProvider Source="{Binding VisiblePortfolios}">
                                                <telerik:ChartSeriesProvider.SeriesDescriptors>
                                                    <telerik:CategoricalSeriesDescriptor ItemsSourcePath="UnderwaterEquityCurve" ValuePath="Value" CategoryPath="Date">
                                                        <telerik:CategoricalSeriesDescriptor.Style>
                                                            <Style TargetType="telerik:AreaSeries">
                                                                <Setter Property="LegendSettings" Value="{Binding Name, Converter={StaticResource SeriesSourceNameToSeriesLegendSettigsConverter}}"/>
                                                                <!-- Where I was attempting to change the fill property's opacity-->
                                                            </Style>
                                                        </telerik:CategoricalSeriesDescriptor.Style>
                                                    </telerik:CategoricalSeriesDescriptor>
                                                </telerik:ChartSeriesProvider.SeriesDescriptors>
                                            </telerik:ChartSeriesProvider>
                                        </telerik:RadCartesianChart.SeriesProvider>
                                    </telerik:RadCartesianChart>
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 29 Aug 2013 Link to this post

    Hi Michael,

     You can change the Opacity of the area series by tweaking the Opacity value of the SolidColorBrush:

    <SolidColorBrush x:Key="MyCustomOpacityFill Opacity="0.5"  Color="#FF1B9DDE"/>

    Then apply the desired Brush to the Fill property of the Area series via Style like this:
    <Window.DataContext>
        <example:MyViewModel />
    </Window.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadCartesianChart x:Name="chart" Margin="10">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis></telerik:CategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis HorizontalAlignment="Right"></telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding Data}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Items" ValuePath="Value" CategoryPath="Category" CollectionIndex="2">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:AreaSeries">
                                    <Setter Property="Fill" Value="{StaticResource MyCustomOpacityFill}"/>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
        </telerik:RadCartesianChart>
    </Grid>

    I hope this information helps.

    Regards,
    Evgenia
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top