1. Home
  2. Forum
  3. Xamarin.Forms
  4. Graph with multiple y Axis (Stacked column & Line - dynamic generation of multiple series)

Graph with multiple y Axis (Stacked column & Line - dynamic generation of multiple series)

Hi, 

I am trying to achieve one requirement of chart with Stacked Column chart & Line charts. (Attached sample code , where I am able to achieve most of it though.)

Chart with one primary axis as Date and two Numerical Secondary yAxis.  

As per requirement, Stacked column chart should be based on primary y axis values while line charts should be based on secondary y axis values. 
As number of series on y axis (stacked column & Line )  will be dynamic based on number of data , I believe generating charts through code would be better approach? 
If yes, than what is the best way to achieve as I am following MVVM approach in my project.  (tried via code for opposed Y axis binding with VM)
Else what is the better way to do this. 


And also if user hover over stack chart , can all those values (stack column all stack along with line chart value for that particular day shows up in overlay as in case of trackball info).

Can you please help with sample in line with something I have attached or  something else best suited for the requirement. 


Regards
Pawan

Attachment: MultipleCharts_Sample_d67e08da.zip

7 Replies
SJ Suyamburaja Jayakumar Syncfusion Team May 12, 2020 11:45 AM UTC

Hi Pawan Shakya, 
 
Greetings from Syncfusion.  
 
We have checked the provided sample and for achieving your requirement by using trackball LabelDisplayMode property as GroupAllPoints. please refer the below UG link 
  
Please let us know if you need any further assistance.  
 
Regards, 
Suyamburaja J. 


PS Pawan Shakya May 12, 2020 12:22 PM UTC

Thanks for your response Suyamburaja.

However along with this, was looking for recommendation on best approach on how should we go ahead in case of dynamic number of graph plotting primary Y axis & Secondary y axis. Please refer my earlier question. 

Designing  SfChart through code as part of view model or any better  approach should I follow to plot dynamic graph?   

Regards
Pawan 

SJ Suyamburaja Jayakumar Syncfusion Team May 13, 2020 01:29 PM UTC

Hi Pawan Shakya, 
 
Thanks for your patience. 
 
We have checked your query and ensured the same with your updated sample, we too recommended to update the same through ViewModel approach. Suggestion from us for rendering the more than one series with default axis as per in below 
 
 
 We need a clarification on your updates like whether you are updating the dynamic data points for series or dynamic axis value.  
 
If your requirement is about, dynamic update of data  
 
Regards, 
Suyamburaja J. 


PS Pawan Shakya May 14, 2020 10:35 AM UTC

Hi Suyamburaja

On this point - 
We need a clarification on your updates like whether you are updating the dynamic data points for series or dynamic axis value.  

  1. Here, should write code in XAML or cs file. As we have requirement for number of series graphs (stack on primary Y-Axis , may be 4-5 LineSeries on Secondary Y-Axis) with obviously holding dynamic data. So to handle (stack on primary Y-Axis , may be 4-5 LineSeries on Secondary Y-Axis), will it be better to create sfchart object and do everything with code as in XAML we can only create defined number charts upfront. Correct ?
  2. On you earlier response to GroupAllPoints, I tried but I also need legend color (as assigned dynamically while chart creation) which I can put in-front of each label along with some more information. Please refer (Group_TrackballInfo_c090d681.zip) for screenshot , where I have also shown desired behaviour. How can we achieve this?  






Attachment: Group_TrackballInfo_c090d681.zip

SJ Suyamburaja Jayakumar Syncfusion Team May 15, 2020 12:32 PM UTC

Hi Pawan Shakya, 
 
Thanks for your update.  
 
Here, should write code in XAML or cs file. As we have requirement for number of series with obviously holding dynamic data. So, to handle, will it be better to create sfchart object and do everything with code as in XAML we can only create defined number charts upfront. Correct? 
 
Yes. 
 
Query 2: I tried but I also need legend color (as assigned dynamically while chart creation) which I can put in-front of each label along with some more information. 
 
We have achieved your requirement by using the TrackballTemplate. We have set the Template only for the last series and hided the trackball label of first other series using the ShowTrackballInfo property which is available in series. Please refer the below code snippet, 
 
XAML: 
<ContentPage.Resources> 
        <ResourceDictionary> 
            <DataTemplate x:Key="trackballTemplate"> 
                <Frame BackgroundColor="Gray"> 
                    <StackLayout Orientation="Vertical" BackgroundColor="Gray"> 
                        <Label TextColor="Black" > 
                            <Label.FormattedText> 
                                <FormattedString> 
                                    <Span Text="{Binding XValue}" FontAttributes="Bold"/> 
                                </FormattedString> 
                            </Label.FormattedText> 
                        </Label> 
                        <Label TextColor="DarkOrange" > 
                            <Label.FormattedText> 
                                <FormattedString> 
                                    <Span Text=" bAvg : "/> 
                                    <Span Text="{Binding YValue}" FontAttributes="Bold"/> 
                                </FormattedString> 
                            </Label.FormattedText> 
    . . . . .  
                        </Label> 
                    </StackLayout> 
                </Frame> 
            </DataTemplate> 
        </ResourceDictionary> 
    </ContentPage.Resources> 
 
     
. . . . 
            <chart:StackingColumnSeries x:Name="series3" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" Label="Good" LegendIcon="SeriesType" Color="Green" EnableAnimation="True" ShowTrackballInfo="True" 
                                      TrackballLabelTemplate="{StaticResource trackballTemplate}"> 
            </chart:StackingColumnSeries> 
    . . . .  . . 
        <chart:SfChart.ChartBehaviors> 
            <chart:ChartTrackballBehavior ActivationMode="TouchMove" ShowLine="True"/> 
        </chart:SfChart.ChartBehaviors> 
 
    </chart:SfChart> 
 
 
Screenshot: 
 
 
More information please refer the below UG link: 
 
Please let us know if you need any further assistance on this.  
  
Regards,  
Suyamburaja J. 


PS Pawan Shakya May 18, 2020 07:58 AM UTC

Hi Suyamburaja,

Thanks for your response , however as I was looking for colour of label in tooltip based on what chart it relates to rather than hardcoded color code mentioned in below example in your earlier comment. 

I have made some progress in this regard where I have grouped All points & able to assign color based on series color. 

  • However only thing I am struggling is with background of trackball which is black currently. Due to this any dark color (blue in screenshot )  is not visible properly , so is there way can we change that ? 
  • Another case,  if we don't assign any color to line series (  Color=“Blue”/> - don't assign color property at all) than chart picks some random default color which is correct. However when I call  ( item.LabelStyle.TextColor = item.Series.Color;  ), it takes black. So as background is also black for trackball , thus not visible. 
  • Would really appreciate if you can help us  sample code  (based on required needs, content driven from View & viewModel) that populates it from C# rather than the page's xaml. As our number of charts are dynamic, looking for C# only.  

private void SfChart_TrackballCreated(object sender, ChartTrackballCreatedEventArgs e)
        {
            foreach (var item in e.ChartPointsInfo)
            {
                var data = item.DataPoint as ChartDataModel;
                item.Label = item.Series.Label + " : " + data.Value;
                item.LabelStyle.TextColor = item.Series.Color;
            }
        }

Regards
Pawan 

Attachment: GroupAll_BackgroundCHangeOrOpacity_6d58dd34.zip

SJ Suyamburaja Jayakumar Syncfusion Team May 18, 2020 11:30 AM UTC

Hi Pawan Shakya, 
 
Thanks for your patience. 
 
Query1: However only thing I am struggling is with background of trackball which is black currently. Due to this any dark color   is not visible properly, so is there way can we change that? 
 
We would like to let you know that your requirement achieved by adding the BackgroundColor to LabelStyle as per the below code snippet. 
 
C#: 
foreach (var item in e.ChartPointsInfo) 
            { 
                var data = item.DataPoint as Model;  
                item.Label = item.Series.Label + " : " + data.Value; 
                item.LabelStyle.BackgroundColor = Color.Gray; 
                . . . . 
            } 
 
 
Query2: if we don't assign any color to line than chart picks some random default color which is correct. However, when I call, it takes black. So, as background is also black for trackball, thus not visible. 
 
On further analyses, chart is having some limitations, so we resolved your issue by manually add the color to label style. default color model from color palette is metro, please refer the below code snippet for your reference 
 
C#: 
private void SfChart_TrackballCreated(object sender, ChartTrackballCreatedEventArgs e) 
        { 
            var chart = sender as SfChart; 
            var color = chart.ColorModel.GetColors(ChartColorPalette.Metro); 
 
            foreach (var item in e.ChartPointsInfo) 
            { 
                var data = item.DataPoint as Model; 
 
                item.Label = item.Series.Label + " : " + data.Value; 
                item.LabelStyle.BackgroundColor = Color.Gray; 
                int index = chart.Series.IndexOf(item.Series); 
                var color1 = color[index % 10]; 
                item.LabelStyle.TextColor = color1; 
            } 
        } 
 
 
 
Please let us know if you need any further assistance on this.  
  
Regards,  
Suyamburaja J. 


Loader.
Up arrow icon