Legend styling (Xamarin Forms)

[Scobie]

Steema version = Steema.TeeChart.NET.Xamarin.Forms v4.2021.1.22
Xamarin Forms version = v5.0.0.1931
Development platform = Visual Studio 2019 Pro v16.7.7
Target device = Android 6.0 (API 23) to API 10.0 (API 29) smallest res = 480x800

I am trying to re-style the legend for a line chart but I cannot find the correct combination of properties to get the desired result. I have looked through the online documentation & tried various approaches but I am not getting anywhere.

I have written a small test solution (attached) to demonstrate what I am trying to achieve.

I would like the legend to have the following properties:

1) White text colour
2) Legend symbol to be square (as per Steema sample chart in image below), rather than a line. I have tried the following code to achieve this but it is not working...

Code: Select all

Chart.Legend.Symbol.Squared = true;
Chart.Legend.Symbol.Height = 10;
Chart.Legend.Symbol.Width = 10;

3) Would like to increase the size of the legend text somehow?
4) Need to prevent the legend text from truncating (e.g. the letter g is cut-off at the bottom)
5) Also, I need to increase the gap between the axis labels & the axis line itself. Again, I have tried changing various properties but am not able to achieve this at the moment.

ChartTestApp with Legend.jpg (98.63 KiB) Viewed 8881 times

All feedback & assistance greatly appreciated

[Pep]

Hello Scobie,

here the answers to your questions, all added in the code below :

Code: Select all

{
	    // Add inside main method
	    
            // 1 - Chart legend font color to white 
            Chart.chart.Legend.Font.Color = Color.White;
            
            // 2 - Legend squared symbol using drawsymbol method
            Chart.chart.Legend.Symbol.OnSymbolDraw += Symbol_OnSymbolDraw;

            // 3 - Increase legend text box size
	   Chart.chart.Legend.Font.Size = 15;

	    // 4 - prevent legend text truncating - Yes a minor bug, as text must be vertical center aligned, workaround using 
            // the getLegendRect
	    Chart.chart.GetLegendRect += Chart_GetLegendRect;

            // 5 - increase gap between axis labels
            Chart.chart.Axes.Left.Ticks.Visible = true;
            Chart.chart.Axes.Left.Ticks.Transparency = 100;
            Chart.chart.Axes.Left.Ticks.Length = 20;
        }

	 private void Chart_GetLegendRect(object sender, GetLegendRectEventArgs e)
        {
          Rectangle chartRect = e.Rectangle;
          e.Rectangle = new Rectangle(e.Rectangle.Left, e.Rectangle.Top, e.Rectangle.Width, e.Rectangle.Height+20);
        }


    	private void Symbol_OnSymbolDraw(object sender, SymbolDrawEventArgs e)
	{
          Rectangle tmpR = e.Rect;
          tmpR.Inflate(-2, -2);
      
          Chart.chart.Graphics3D.Rectangle(tmpR);      
        }

Hope that it helps.

About the problem 4, just let you know that I 've added it as a bug on our bug list and a fix will be considered for the next maintenance release.

[Scobie]

Hello,

Thank you for your comprehensive answer. I have now applied all the fixes which you have listed & the legend & chart are now showing as required.

ChartWithFixes.png (73.22 KiB) Viewed 8817 times

Once again, thanks for your help.