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

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.