Tamar Cohen
Tamar Cohen

Reputation: 1292

WPF Chart Toolkit - Change area series color's opacity

I need the area series charting to look like:enter image description here

I succeeded in hiding the two axis and changing the colors to gradient brush. I still need help on changing the opacity so the green one will be "behind" the orange one. Also - How do I change the little points on the graph? How do I change the background to be transparent? How to hide the chart title?

Right now it looks like this:

enter image description here

Any help will be very appreciated!

Here is my xaml code:

    <LinearGradientBrush x:Key="GreenGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#77b31a" Offset="0.75"></GradientStop>
            <GradientStop Color="#85d805" Offset="0.45"></GradientStop>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="OrangeGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <LinearGradientBrush.GradientStops>
        <GradientStop Color="#fff92900" Offset="0.75"></GradientStop>
            <GradientStop Color="#ffff6115" Offset="0.45"></GradientStop>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="GreenAreaSeriesStyle" TargetType="Control">
        <Setter Property="Background" Value="{StaticResource GreenGradientBrush}" />
        <Setter Property="Opacity" Value="1"></Setter>
    </Style>
    <Style x:Key="OrangeAreaSeriesStyle" TargetType="Control">
        <Setter Property="Background" Value="{StaticResource OrangeGradientBrush}" />
        <Setter Property="Opacity" Value="1"></Setter>
    </Style>

    <datavis:ResourceDictionaryCollection x:Key="MyPalette">
        <ResourceDictionary>
            <Style x:Key="DataPointStyle" BasedOn="{StaticResource GreenAreaSeriesStyle}" TargetType="Control" >
            </Style>
        </ResourceDictionary>
        <ResourceDictionary>
            <Style x:Key="DataPointStyle" BasedOn="{StaticResource OrangeAreaSeriesStyle}" TargetType="Control" >
            </Style>
        </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>

    <Style x:Key ="PerformanceChartMajorTickMarkStyle" TargetType="Line">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>

</Window.Resources>
 <charting:Chart Palette="{StaticResource MyPalette}" HorizontalAlignment="Left" Margin="39,38,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Width="815" Height="598" OverridesDefaultStyle="False">            
        <charting:Chart.LegendStyle>
                <Style TargetType="datavis:Legend">
                    <Setter Property="Width" Value="0" />
                </Style>
        </charting:Chart.LegendStyle>

        <charting:AreaSeries Name="Green" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}"  IsSelectionEnabled="True" >
            <charting:AreaSeries.IndependentAxis>
                <charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
            </charting:AreaSeries.IndependentAxis>
            <charting:AreaSeries.DependentRangeAxis>
                <charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
            </charting:AreaSeries.DependentRangeAxis>

        </charting:AreaSeries>
        <charting:AreaSeries Name="Orange" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}"  IsSelectionEnabled="True">
            <charting:AreaSeries.IndependentAxis>
                <charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
            </charting:AreaSeries.IndependentAxis>
            <charting:AreaSeries.DependentRangeAxis>
                <charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
            </charting:AreaSeries.DependentRangeAxis>
        </charting:AreaSeries>
    </charting:Chart>

Upvotes: 2

Views: 3520

Answers (1)

Marc Osterland
Marc Osterland

Reputation: 163

I posted a similar question and got the following answer, which really helped me.

<ch:Chart Margin="56,21,50,72" Title="MyChart" DataContext="{Binding ElementName=Window, Mode=OneWay}"  Style="{StaticResource controlStyle}" >

                <ch:AreaSeries Name="DefaultArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" Title="111111" >
                    <ch:AreaSeries.Style>
                        <Style TargetType="ch:AreaSeries">
                            <Setter Property="IsTabStop" Value="False"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ch:AreaSeries">
                                        <Canvas x:Name="PlotArea">
                                            <Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Pink" Style="{TemplateBinding PathStyle}" Opacity="1" />
                                        </Canvas>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ch:AreaSeries.Style>
                </ch:AreaSeries>

                <ch:AreaSeries Name="PersonnelArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" >
                    <ch:AreaSeries.Style>
                        <Style TargetType="ch:AreaSeries">
                            <Setter Property="IsTabStop" Value="False"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ch:AreaSeries">
                                        <Canvas x:Name="PlotArea">
                                            <Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Yellow" Style="{TemplateBinding PathStyle}" Opacity="1" />
                                        </Canvas>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ch:AreaSeries.Style>

                </ch:AreaSeries>  
            </ch:Chart>

You can also set the style as Ressource in XAML and then assign it dynamically in the code behind. Here my original question with the Answer: WPF AreaSeries: How to change background opacity?

Upvotes: 2

Related Questions