Windows UWP SFChart - Column or Bar chart plot color based on value? - syncfusion

Question

Is it possible to set the color of the bar based on the value, for example say my min was 0 and max was 10, if my value is between 0 and 3 color the bar green, if its between 3 and 7 colour it blue, and if its between 7 and 10 color it yellow.

Answer 1

Yes. It is possible to set the color based on the value. We can able to achieve your requirement by customizing the individual bar/column template color by CustomTemplate property as per the below code snippet.
Code Snippet [XAML]:
<Grid.Resources>
<local:ColorConverter x:Key="conv1"/>
<DataTemplate x:Key="columnTemplate1">
<Canvas>
<Rectangle Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}" Height="{Binding Height}"
Width="{Binding Width}" Stretch="Fill"
Fill="{Binding Converter={StaticResource conv1}}"></Rectangle>
</Canvas>
</DataTemplate>
</Grid.Resources>
<Grid.DataContext>
<local:TestingValuesCollection/>
</Grid.DataContext>
<syncfusion:SfChart x:Name="chart" >
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis Minimum="0" Maximum="10"/>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:ColumnSeries x:Name="series1" ItemsSource = "{Binding TestingModel}" XBindingPath = "X"
CustomTemplate="{StaticResource columnTemplate1}" YBindingPath = "Y">
</syncfusion:ColumnSeries>
</syncfusion:SfChart>
Code Snippet [C#]:
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
ColumnSegment segment = value as ColumnSegment;
//First region value declaration.
DoubleRange firstRegion = new DoubleRange(0, 3);
SolidColorBrush firstRegionBrush = new SolidColorBrush(Colors.Green);
//Second region value declaration.
DoubleRange secondRegion = new DoubleRange(3, 7);
SolidColorBrush secondRegionBrush = new SolidColorBrush(Colors.Blue);
//Third region value declaration.
DoubleRange thirdRegion = new DoubleRange(7, 10);
SolidColorBrush thirdRegionBrush = new SolidColorBrush(Colors.Yellow);
if (segment.YData >= firstRegion.Start && segment.YData <= firstRegion.End)
return firstRegionBrush;
else if (segment.YData >= secondRegion.Start && segment.YData <= secondRegion.End)
return secondRegionBrush;
else if (segment.YData >= thirdRegion.Start && segment.YData <= thirdRegion.End)
return thirdRegionBrush;
return segment.Interior;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
We can able to add more region in converter and return any color to the bar/column.
We have done this code based on y-axis value. If your requirement is based on x-axis value means check segment.XData instead of checking segment.YData in converter.