This is a migrated thread and some comments may be shown as answers.

Set The Color Of Negative Value On AreaSeries

2 Answers 266 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

H asked on 06 Dec 2013, 05:53 AM

c.png

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 Answers, 1 is accepted

answered on 10 Dec 2013, 09:39 AM

AreaSeries.png

wpf-ChartView-765887-PositiveNegativeAreaSeries-WorkAround-ExtraItems.zip

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 >>