This article describes how to change the individual appearance(color) of bar segment based on the corresponding YValues in WPF SfChart by following these steps:
Step 1: To change color for specific data point in chart you can refer this KB article.
Step 2: Also you can customize the interior color of the particular segment based on the respective Y value by using the converter in the CustomTemplate property of ColumnSeries as demonstrated in the following code example. The detailed explanation of this appearance customization can be found in this user documentation page.
[XAML]
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<Grid.Resources>
<local:InteriorConverter x:Key="interiorConverter"/>
</Grid.Resources>
<chart:SfChart Margin="10">
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis LabelFormat="yyyy"></chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis></chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:ColumnSeries XBindingPath="Year" YBindingPath="India" ItemsSource="{Binding DataPoints}">
<chart:ColumnSeries.CustomTemplate>
<DataTemplate>
<Canvas>
<Rectangle Fill="{Binding Converter={StaticResource interiorConverter}}" Height="{Binding Height}" Width="{Binding Width}" Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"></Rectangle>
</Canvas>
</DataTemplate>
</chart:ColumnSeries.CustomTemplate>
<chart:ColumnSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo AdornmentsPosition="TopAndBottom" LabelPosition="Center" SegmentLabelContent="LabelContentPath" ShowLabel="True" >
<chart:ChartAdornmentInfo.LabelTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Item.India}" Foreground="White" FontSize="11"></Label>
</StackPanel>
</DataTemplate>
</chart:ChartAdornmentInfo.LabelTemplate>
</chart:ChartAdornmentInfo>
</chart:ColumnSeries.AdornmentsInfo>
</chart:ColumnSeries>
</chart:SfChart>
</Grid>
[C#]
public class InteriorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var ydata = (value as ColumnSegment).YData;
Brush interior;
interior = ydata > 0 ?
new SolidColorBrush(Colors.Green) :
new SolidColorBrush(Colors.Red);
return interior;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
View Model
public class ViewModel
{
public ViewModel()
{
this.DataPoints = new ObservableCollection<Model>();
DateTime year = new DateTime(2005, 5, 1);
DataPoints.Add(new Model() { Year = year.AddYears(1), India = 28, Germany = 31, England = 36, France = 39 });
DataPoints.Add(new Model() { Year = year.AddYears(2), India = 25, Germany = 28, England = 32, France = 36 });
DataPoints.Add(new Model() { Year = year.AddYears(3), India = 26, Germany = 30, England = 34, France = 40 });
DataPoints.Add(new Model() { Year = year.AddYears(4), India = -27, Germany = 36, England = 41, France = 44 });
DataPoints.Add(new Model() { Year = year.AddYears(5), India = -32, Germany = 36, England = 42, France = 45 });
DataPoints.Add(new Model() { Year = year.AddYears(6), India = 35, Germany = 39, England = 42, France = 48 });
DataPoints.Add(new Model() { Year = year.AddYears(7), India = -30, Germany = 38, England = 43, France = 46 });
}
public ObservableCollection<Model> DataPoints { get; set; }
}
public class Model
{
public DateTime Year { get; set; }
public double India { get; set; }
public double Germany { get; set; }
public double England { get; set; }
public double France { get; set; }
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent