Category / Section
How to change colors of specific data points in the chart
1 min read
This KB explains how to bind color to each item of the series from ViewModel.
You can specify the desired color for each segment of the chart series through the property SegmentColorPath. This property allows you to map each segment in a chart series to a specific color in ViewModel.
You can specify the desired color in ViewModel as in the following code example.
C#
public class ViewModel
{
public ObservableCollection<Model> Data { get; set; }
public ViewModel()
{
Data = new ObservableCollection<Model>();
Data.Add(new Model() { XValue = "Apple", YValue = 40, Color = Brushes.Tomato });
Data.Add(new Model() { XValue = "Orange", YValue = 30, Color = Brushes.Orange });
Data.Add(new Model() { XValue = "Grape", YValue = 25, Color = Brushes.Violet });
Data.Add(new Model() { XValue = "Blueberry", YValue = 15, Color = Brushes.MediumSlateBlue });
Data.Add(new Model() { XValue = "Guava", YValue = 32, Color = Brushes.LawnGreen });
Data.Add(new Model() { XValue = "Banana", YValue = 55, Color = Brushes.LightGoldenrodYellow });
}
}
The following code explains how to create charts, where each segment has its color bound to the property of the underlying data object.
XAML
<chart:SfChart >
<chart:PieSeries SegmentColorPath="Color" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" />
</chart:SfChart>
C#
PieSeries series = new PieSeries()
{
ItemsSource = viewModel.Data,
XBindingPath = "XValue",
YBindingPath = "YValue",
SegmentColorPath = "Color"
};
chart.Series.Add(series);
Output:
