How to customize the individual appearance of the WPF Bar Chart (SfChart)?
This article describes how to change the individual appearance of a bar in WPF Chart.
Solution 1: This KB article explains how to change the color for a specific data point in a chart.
Solution 2: You can also 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. A detailed explanation of this appearance customization can be found in this user documentation page.
XAML
<Grid>
<Grid.DataContext>
<local:ViewModel></local:ViewModel>
</Grid.DataContext>
<Grid.Resources>
<local:InteriorConverter x:Key="interiorConverter"></local: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 LabelPosition="Center" SegmentLabelContent="LabelContentPath" AdornmentsPosition="TopAndBottom" 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 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; }
}
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();
}
}
Output
You can download the sample in Github.
See Also:
Series customization in WPF SfChart.
How-to-customize-the-chart-series-in-WPF-SfChart?
Conclusion
I hope you enjoyed learning about how to customize the individual appearance of the WPF Bar Chart (SfChart).
You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WPF Chart and other WPF components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
