How to display a mutiple 2 line BarSeries in Xamarin.Forms SFhart

[Afsal T]

I have a list of categories and I need to display 2 employee sales data corresponding to each category as below

Currently, I am displaying a single category with the following code and my customer wants the graph as above.

One more thing is that categories are also dynamic they will get reduced based on the sales so I need that custom populated option as well.

Current UI code

<chart:SfChart BackgroundColor="{StaticResource BiscayBlueColor}" HeightRequest="300">
                                <chart:SfChart.ChartBehaviors>
                                    <chart:ChartTooltipBehavior BackgroundColor="Black" TextColor="White"/>
                                </chart:SfChart.ChartBehaviors>
                                <chart:SfChart.Title>
                                    <chart:ChartTitle Text="{markupExtensions:Translate TitleSalesByCategory}" TextColor="White" 
                                        FontAttributes="Bold" />
                                </chart:SfChart.Title>
                                <chart:SfChart.PrimaryAxis>
                                    <chart:CategoryAxis>
                                        <chart:CategoryAxis.Title>
                                            <chart:ChartAxisTitle Text="{markupExtensions:Translate LabelSales}" TextColor="White"/>
                                        </chart:CategoryAxis.Title>
                                        <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.Title>
                                            <chart:ChartAxisTitle Text="{markupExtensions:Translate LabelAmount}" TextColor="White"/>
                                        </chart:NumericalAxis.Title>
                                        <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}" StrokeWidth="10"
                                    XBindingPath="XAxisValue" YBindingPath="YAxisValue" EnableTooltip="True">
                                    <chart:BarSeries.ColorModel>
                                        <chart:ChartColorModel Palette="Custom" CustomBrushes="{StaticResource BarGraphColors}"/>
                                    </chart:BarSeries.ColorModel>
                                </chart:BarSeries>
                            </chart:SfChart>

When I look into the BarSeries option then I have found that I can use multiple BarSeries inside a chart but there is an issue with that, the list that is coming from the ViewModel is a dynamically generated list so I can not provide the exact number from UI. I also need a custom control that can handle a dynamically generated list of categories.

Please help me for fixing this issue.

[Vimala Thirumalai Kumar]

Hi Afsal T

We have analyzed your query and based on the provided details we suspect that your requirement is to generate the multiple BarSeries dynamically.

You can refer the below KB example similar to your requirement by creating custom chart with BarSeries based on your requirement with the ViewModel data dynamically generated with categories list.

KB: https://www.syncfusion.com/kb/11285/how-to-visualize-the-xamarin-forms-pie-chart-in-linear-form

You can customize the chart and a generate new series (BarSeries) for each ItemsSource changed dynamically.

Please check the above suggested solution and let us know if you need any further assistance.

Incase if we misunderstand your requirement could you please share more details of your requirement with example chart sample, ViewModel data dynamic changes which will be helpful to provide you better solution at the earliest.

Regards,

Vimala Thirumalai Kumar

[Afsal T]

I don't need the stacking BarSeries instead I need dynamic bar series and it should display like the above image.

From ViewModel I will pass List<List<CategoriesSales>> and I need a custom class that will generate Category sales by going through each list.

For example

foreach(List<CategorySales> categorySalesOfServerAndEmployee in List<List<CategorySales>)

{

      Here I need to create BarSeries for one category which ill have Server and Compare employee sales

}

The above image is for displaying the Server and Compare Employee sales in every category.

[Vimala Thirumalai Kumar]

Hi Afsal T,

We can create the multiple BarSeries dynamically as per in the below code example.

private void CreateSeries(object newValue)

{

    BarSeries barSeries = new BarSeries()

     {

        ItemsSource = newValue as List<Model>,

        XBindingPath = XBindingPath,

        YBindingPath = YBindingPath,

      };

      Series.Add(barSeries);

}

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

Regards,

Vimala Thirumalai Kumar

Attachment: Sf177932_BarMultipleSeries_b3ba4f15.zip