How to provide different colors to different Bars in SfChart BarSeries

[Afsal T]

I need to display 2 employees sales in Bar form.

I have created SfChart BarSeries and provided 2 employee details and X and Y axis values from the ViewModel. But I need to display both employees in different colors but I can provide only a single color and no DataTemplate available for each Items Bar.

First approach Code

<chart:SfChart BackgroundColor="{StaticResource BiscayBlueColor}" HeightRequest="300">
                                <chart:SfChart.Title>
                                    <chart:ChartTitle Text="{markupExtensions:Translate TitleSalesByCategory}" TextColor="White" 
                                        FontAttributes="Bold" />
                                chart:SfChart.Title>
                                <chart:SfChart.PrimaryAxis>
                                    <chart:CategoryAxis>
                                        <chart:CategoryAxis.MajorTickStyle>
                                            <chart:ChartAxisTickStyle TickSize="0" />
                                        chart:CategoryAxis.MajorTickStyle>
                                        <chart:CategoryAxis.LabelStyle>
                                            <chart:ChartAxisLabelStyle TextColor="White" />
                                        chart:CategoryAxis.LabelStyle>
                                    chart:CategoryAxis>
                                chart:SfChart.PrimaryAxis>
                                <chart:SfChart.SecondaryAxis>
                                    <chart:NumericalAxis>
                                        <chart:NumericalAxis.MajorTickStyle>
                                            <chart:ChartAxisTickStyle TickSize="0" >
                                            chart:ChartAxisTickStyle>
                                        chart:NumericalAxis.MajorTickStyle>
                                        <chart:NumericalAxis.LabelStyle>
                                            <chart:ChartAxisLabelStyle TextColor="White" />
                                        chart:NumericalAxis.LabelStyle>
                                    chart:NumericalAxis>
                                chart:SfChart.SecondaryAxis>
                                <chart:BarSeries ItemsSource="{Binding BarGraphData}" Color="White" StrokeWidth="10"
                                    XBindingPath="XAxisValue" YBindingPath="YAxisValue"/>
                            chart:SfChart>

And the UI looks like this

But I need to display both bars in a different color, so I have tried the below approach

<chart:SfChart BackgroundColor="{StaticResource BiscayBlueColor}" HeightRequest="300">
                                <chart:SfChart.Title>
                                    <chart:ChartTitle Text="{markupExtensions:Translate TitleSalesByCategory}" TextColor="White" 
                                        FontAttributes="Bold" />
                                chart:SfChart.Title>
                                <chart:SfChart.PrimaryAxis>
                                    <chart:CategoryAxis>
                                        <chart:CategoryAxis.MajorTickStyle>
                                            <chart:ChartAxisTickStyle TickSize="0" />
                                        chart:CategoryAxis.MajorTickStyle>
                                        <chart:CategoryAxis.LabelStyle>
                                            <chart:ChartAxisLabelStyle TextColor="White" />
                                        chart:CategoryAxis.LabelStyle>
                                    chart:CategoryAxis>
                                chart:SfChart.PrimaryAxis>
                                <chart:SfChart.SecondaryAxis>
                                    <chart:NumericalAxis>
                                        <chart:NumericalAxis.MajorTickStyle>
                                            <chart:ChartAxisTickStyle TickSize="0" >
                                            chart:ChartAxisTickStyle>
                                        chart:NumericalAxis.MajorTickStyle>
                                        <chart:NumericalAxis.LabelStyle>
                                            <chart:ChartAxisLabelStyle TextColor="White" />
                                        chart:NumericalAxis.LabelStyle>
                                    chart:NumericalAxis>
                                chart:SfChart.SecondaryAxis>
​
                                <chart:BarSeries ItemsSource="{Binding BarGraphData1}" Color="White" StrokeWidth="5" Label="RowSeries"
                                    XBindingPath="XAxisValue" YBindingPath="YAxisValue">
                                chart:BarSeries>
                                <chart:BarSeries ItemsSource="{Binding BarGraphData2}" Color="Green" StrokeWidth="5" Label="RowSeries"
                                    XBindingPath="XAxisValue" YBindingPath="YAxisValue">
                                chart:BarSeries>
​
                            chart:SfChart>

Here I have added two bar series and split the values into the 2 ItemSource and the output looks like this

But here Both names are combined into a single line with a comma separator.

How can I display both Names in a separate line and provide some margin between them?

My second issue is I need to display a subheader for mentioning colors with the employee name(After the Sales Category header I need to display Shubham and the corresponding color then Afsal corresponding color on the topmost left side.

Similar to this

I am new to Syncfusion so Please help me for fixing this issue.

[Devakumar Dhanapoosanam]

Hi Afsal T,

Query 1: display both bars in a different color

We would like to let you know that we can set the bar series segment with different colors for each segment by using the series ColorModel property, set Palette custom and add the CustomBrushes colors collection based on your requirement as per in the below code example.

<ContentPage.Resources>

    <ResourceDictionary>

        <chart:ChartColorCollection x:Key="Colors">

            <Color>White</Color>

            <Color>Green</Color>

            <Color>Red</Color>

            <Color>Maroon</Color>

            <Color>Pink</Color>

        </chart:ChartColorCollection>

    </ResourceDictionary>

</ContentPage.Resources>

 

…

<chart:BarSeries x:Name="barSeries" ItemsSource="{Binding Data}"

                  XBindingPath="XValue" YBindingPath="YValue">

     <chart:BarSeries.ColorModel>

         <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource Colors}"/>

     </chart:BarSeries.ColorModel>

</chart:BarSeries>

Please refer the below link for more details.

https://help.syncfusion.com/xamarin/charts/appearance#apply-palette-for-series

https://www.syncfusion.com/kb/12215/how-to-customize-the-segment-color-based-on-the-y-value-in-xamarin-forms-charts

Query 2: display a subheader for mentioning colors with the employee name

We can show the legend label for each data point in bar series by suing the Series property of the ChartLegend as per in the below code example.

…

<chart:BarSeries x:Name="barSeries" ItemsSource="{Binding Data}"

                  XBindingPath="XValue" YBindingPath="YValue">

   …

</chart:BarSeries>

<chart:SfChart.Legend>

    <chart:ChartLegend Series="{x:Reference barSeries}">

        …

    </chart:ChartLegend>

</chart:SfChart.Legend>

Please refer the below link for more details.

https://help.syncfusion.com/xamarin/charts/legend#populate-the-data-based-legend-items-for-all-series

Please find the example sample in the attachment below and let us know if you need any further assistance.

Regards,

Devakumar D

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SF_177250_79c282ed.zip