How to provide different colors to different Bars in SfChart BarSeries

Question

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.

I have asked this question in syncfusion forms as well.

Answer 1

I have received the response from the Syncfusion side. Solution