1. Home
  2. Forum
  3. Xamarin.Forms
  4. Alignment of multiple charts in a single form through an equal SecondaryAxis width

Alignment of multiple charts in a single form through an equal SecondaryAxis width

Would anyone know how to create a constant SecondaryAxis width so multiple charts in the same form would all align up?
  • The secondary axis increments are dynamically created and will vary depending one what underlying data-set is selected.  This causes padding and margin settings to fail (padding could align all of the charts for a given data-set and then not align if a different data-set has significantly different increments).
  • The technical indicators don't work well as overlays on some candlestick data-sets due to the secondary axis increments values.  In my opinion, the indicators are easier to read as a stack of charts, but this looks odd if the columns and edges of the chart don't align.
  • I think a SecondaryAxis label width might be a solution, but I have not seen this type of setting.


6 Replies
DD Devakumar Dhanapoosanam Syncfusion Team May 14, 2020 05:55 PM UTC

Hi Christopher, 
 
Greetings from Syncfusion. 
 
Query: I think a SecondaryAxis label width might be a solution, but I have not seen this type of setting. 
 
We would like to let you know that we can customize the axis label width using the MaxWidth property of the chart axis LabelStyle as in the below code, 
 
XAML: 
<chart:SfChart.SecondaryAxis> 
        <chart:NumericalAxis OpposedPosition="True"> 
                <chart:NumericalAxis.LabelStyle> 
                        <chart:ChartAxisLabelStyle MaxWidth="100"/> 
                </chart:NumericalAxis.LabelStyle> 
        </chart:NumericalAxis> 
</chart:SfChart.SecondaryAxis> 
 
We hope the above solution will works for your requirement with constant axis width. 
 
Please refer the below help document for more details, 
 
Can you please share more details regarding the TechnicalIndicator query with any pictorial or video representation which will be helpful for us to understand your exact requirement? 
 
Regards, 
Devakumar D 


CH Christopher May 14, 2020 05:58 PM UTC

Thank you :)

I will certainly give it a try.  If there is a corresponding MinWidth, I will have a solution absolutely for sure!

CH Christopher replied to Devakumar Dhanapoosanam May 14, 2020 06:02 PM UTC

Hi Christopher, 
 
Greetings from Syncfusion. 
 
Query: I think a SecondaryAxis label width might be a solution, but I have not seen this type of setting. 
 
We would like to let you know that we can customize the axis label width using the MaxWidth property of the chart axis LabelStyle as in the below code, 
 
XAML: 
<chart:SfChart.SecondaryAxis> 
        <chart:NumericalAxis OpposedPosition="True"> 
                <chart:NumericalAxis.LabelStyle> 
                        <chart:ChartAxisLabelStyle MaxWidth="100"/> 
                </chart:NumericalAxis.LabelStyle> 
        </chart:NumericalAxis> 
</chart:SfChart.SecondaryAxis> 
 
We hope the above solution will works for your requirement with constant axis width. 
 
Please refer the below help document for more details, 
 
Can you please share more details regarding the TechnicalIndicator query with any pictorial or video representation which will be helpful for us to understand your exact requirement? 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team May 15, 2020 05:27 PM UTC

Hi Christopher, 
 
Thanks for your update. 
 
Query: If there is a corresponding MinWidth? 
 
Currently we don’t have the MinWidth for the axis LabelStyle. As we said earlier please check by using the MaxWidth property of the axis LabelStyle.  
 
Please let us know whether the axis label MaxWidth works for your requirement or not. 
 
Query:  this looks odd if the columns and edges of the chart don't align. 
 
Sorry. Still we were not clear about your exact query related to the technical indicator with the provided screenshot. Can you please share more details again and by highlighting the chart screenshot for better understanding of your query?   
 
Regards, 
Devakumar D 


CH Christopher May 20, 2020 04:06 AM UTC

Hi,

"Currently we don’t have the MinWidth for the axis LabelStyle. As we said earlier please check by using the MaxWidth property of the axis LabelStyle."

I love these controls, but I am having a little trouble polishing the final end-user experience.

  • Simple charts are easier for humans to quickly understand.  I believe that having many indicators overlapping the Japanese Candlestick chart make the information harder for humans to understand.
  • The indicators often do not have common overlapping secondary axis's.  For example, Japanese Candlestick chart in 8 to 14.5 range; MACD -1 to 0.5 range; RSI 0 to 100 range; ADX 0 to 2,500,000 range.  The chart and indicators will get skewed if the secondary axis were to be 0.5 to 2,500,00. 
  • All charts share the exact same primary axis (of time).
I marked up the following image.  Please notice that the primary axis date swim lanes don't align and that the overall width of the charts don't align.

If the Japanese Candlestick and associated indicator charts all aligned on the primary axis -- it would simply be glorious (as the MaxWidth does not appear to do the trick)!



DD Devakumar Dhanapoosanam Syncfusion Team May 21, 2020 11:13 AM UTC

Hi Christopher, 
 
Thanks for your update and we were able to see the difference in the provided screenshot using the MaxWidth. 
 
Can you please share the following details which will be helpful for us to analyze the reported issue and provide a better solution at earlier? 
 
·       Can you please ensure whether you have set any Padding or Margin value for all the charts added any page layout? 
·       Can you please share the complete chart related code snippet along with the ViewModel files or share a simple sample if possible? 
 
Regards, 
Devakumar D 


Loader.
Up arrow icon