Set The Color Of Negative Value On AreaSeries

3 posts, 0 answers
  1. H
    H avatar
    3 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    How to give positive and negative values ​​set different colors.

    ChartView can do it?

    <chart:RadCartesianChart x:Name="chart1" Width="1725" Height="176" TrackBallLineStyle="{StaticResource trackBallLineStyle}" Grid.RowSpan="2" Loaded="chart1_Loaded">
                            <chart:RadCartesianChart.TrackBallInfoStyle>
                                <Style TargetType="chartView:TrackBallInfoControl">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="chartView:TrackBallInfoControl">
                                                <StackPanel Name="panel">
                                                </StackPanel>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </chart:RadCartesianChart.TrackBallInfoStyle>
                            <chart:RadCartesianChart.Behaviors>
                                <chartView:ChartTrackBallBehavior ShowIntersectionPoints="False" />
                            </chart:RadCartesianChart.Behaviors>
                            <chartView:AreaSeries CategoryBinding="Time" ValueBinding="Data"  Fill="#FFCC80"  Stroke="#FF9900" StrokeThickness="2"  ItemsSource="{Binding DemoList}" Loaded="AreaSeries_Loaded">
                                <chartView:AreaSeries.TrackBallInfoTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical" Margin="0,0,0,20">
                                            <Border Background="#666666" Width="65" Height="20" CornerRadius="3" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                <TextBlock Text="{Binding DataPoint.Value}" FontSize="14" FontFamily="Segoe UI" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                            </Border>
                                            <Path HorizontalAlignment="Center" VerticalAlignment="Center" Height="6" Width="14" Stretch="Fill" Opacity="1" Data="M 25,22 C25,22 39,22 39,22 39,22 32,28 32,28 32,28 25,22 25,22 z" Fill="#666666" Margin="0,2,0,0"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </chartView:AreaSeries.TrackBallInfoTemplate>
                            </chartView:AreaSeries>
                            <chart:RadCartesianChart.HorizontalAxis>
                                <chartView:DateTimeContinuousAxis MajorStepUnit="Month"
                                                              MajorStep="3"
                                                    LabelFormat="yyyy年MM月dd日"
                                                    LabelInterval="1" FontFamily="Segoe UI"
                                                    PlotMode="OnTicks" />
                            </chart:RadCartesianChart.HorizontalAxis>
                            <chart:RadCartesianChart.VerticalAxis>
                                <chartView:LinearAxis Minimum="-3000"
                                        MajorStep="1000"
                                        Maximum="3000" FontFamily="Segoe UI" MajorTickStyle="{StaticResource tickStyle}" LabelStyle="{StaticResource yLableStyle}">
                                </chartView:LinearAxis>
                            </chart:RadCartesianChart.VerticalAxis>
                            <chart:RadCartesianChart.Grid>
                                <chartView:CartesianChartGrid MajorLinesVisibility="X" MajorXLineDashArray="7,3" StripLinesVisibility="Y">
                                    <chartView:CartesianChartGrid.MajorXLineStyle>
                                        <Style TargetType="{x:Type Line}">
                                            <Setter Property="Stroke" Value="#CCCCCC"/>
                                        </Style>
                                    </chartView:CartesianChartGrid.MajorXLineStyle>
                                    <chartView:CartesianChartGrid.YStripeBrushes>
                                        <SolidColorBrush Color="Transparent" />
                                        <SolidColorBrush Color="#EDEDED" Opacity="0.5" />
                                    </chartView:CartesianChartGrid.YStripeBrushes>
                                </chartView:CartesianChartGrid>
                            </chart:RadCartesianChart.Grid>
                        </chart:RadCartesianChart>

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 10 Dec 2013 Link to this post

    Unfortunately there is no such a feature in our charting solutions. If you are using a DateTimecontinuousAxis you can work around this by using an extra series. The first series will show the positive data and the second will show the negative data. This however requires splitting the original data and inserting extra items. Also in order not to show the point marks for the extra items you need to use a template selector.

    I have attached simple project to demonstrate this. The code I have provided is for guiding purposes and you need to update it as needed.

    Regards,
    Petar Marchev
    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
  4. H
    H avatar
    3 posts
    Member since:
    Nov 2013

    Posted 12 Dec 2013 Link to this post

    It's A Very Good Advice.Thank You Very Much!
Back to Top