Formatting Help with a Circular Gauge...

[JNuzzi]

Hello All,

I have been struggling like heck to get the Gauge to look like I want. Currently, it looks like this:

Screenshot 2025-06-09 122458.png (6.5 KiB) Viewed 666 times

I would like the labels offset more from the frame and centered on their tick. What setting am I missing (I tried about a million things), or maybe it is not possible?

Thanks,

John

[JNuzzi]

Activating the GDI+ has moved the label off of the frame, so that's good. I still can figure out how to center the labels on their tick, though.

Screenshot 2025-06-09 144323.png (9.99 KiB) Viewed 642 times

I tried using OpenGL, but it seems to struggle with the Circular Gauge...at least as I have it configured:

Screenshot 2025-06-09 144951.png (12.7 KiB) Viewed 642 times

I really wish I knew what Steema's fascination with default gradients everywhere is. It's such a PITA to remove it all.

NUZ

[Yeray]

Hello,

I'm afraid the alignment of the labels in the CircularGauge is an old issue in the list: #833.
We'll take a look at it.

I really wish I knew what Steema's fascination with default gradients everywhere is. It's such a PITA to remove it all.

Well, it's a component born when the tends were different... yes gradients everywhere with saturated colors.
This usually helps to clean the majority, not for the CircularGauge I'm afraid:

Code: Select all

uses TeeThemes;

    ApplyChartTheme(TLookoutTheme, Chart1);

[JNuzzi]

Thank you for the reply, Yerah. But, wow, first reported 11 years ago. I probably don't have much hope of seeing it resolved by the time I finish this project? Is there a way to "owner draw" it, perhaps? I looked at a few of the events associated with the chart and the series, but did not find anything that would provide the insertion point or position (angle) on the frame to get the angle right.

Thanks again,

NUZ

[Yeray]

Hello,

I've been able to fix that old bug #833.

I've also added a related fix/feature. Now the labels consider the Axis.Texts.MarginToAxis when being drawn.

I believe you don't have the TeeChart sources so I can't send you the diff.
However, if you can tell me what TeeChart and RAD versions you are using, I can try to prepare a patch for you.

Here is my example:

circulargauge.png (16.79 KiB) Viewed 273 times

Code: Select all

uses Chart, TeEngine, TeeCircularGauge;

var Chart1: TChart;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1:=TChart.Create(Self);

  with Chart1 do
  begin
    Parent:=Self;
    Align:=alClient;
    Color:=clWhite;
    Gradient.Visible:=False;
    Walls.Back.Color:=clWhite;
    Walls.Back.Gradient.Visible:=False;
    Legend.Hide;
    View3D:=False;

    with TCircularGauge(AddSeries(TCircularGauge)) do
    begin
      Frame.Hide;
      EndPoint.Hide;
      Center.Hide;
      Hand.Shadow.Hide;
      Hand.Gradient.Visible:=False;
      Hand.Color:=$701919;
      Hand.Distance:=0;
      Hand.HorizSize:=10;
      Hand.Style:=psTriangle;
      Hand.Offset:=100;

      Axis.Texts.MarginToAxis:=30;

      for var i:=0 to Ranges.Count-1 do
      begin
        Ranges[i].Format.Position:=0;
        Ranges[i].Format.Size:=25;
        Ranges[i].Format.Gradient.Visible:=False;
        Ranges[i].Format.Spiralled:=False;
      end;

      Ranges[0].EndValue:=12;
      Ranges[1].StartValue:=12;
      Ranges[1].EndValue:=20;

      Ranges[0].Format.Color:=$00ffff;
      Ranges[1].Format.Color:=$f0caa6;

      LabelsInside:=False;
      Axis.LabelsFont.Color:=clBlack;
      Axis.LabelsFont.Size:=12;

      Maximum:=20;
      Axis.Increment:=4;
      ValueFormat:='#,##0.0';

      Value:=19;
    end;

    Title.CustomPosition:=True;
    Title.Text.Text:='19.0';
    Title.Font.Size:=12;
    Title.Font.Style:=[fsBold];
    Title.Font.Color:=clBlack;

    Draw;

    Title.Left:=(Self.Width div 2) - (Title.Width div 2) - 8;
    Title.Top:=TCircularGauge(Chart1[0]).CircleYCenter - Title.Height - 10;
  end;
end;

[JNuzzi]

Oh, that is awesome. Thank you. I am using RADStudio C++ 12 Version 29.0.55362.2017, and TChart (it looks like) 2023.39. I'm not sure where to find the actual installed version number, but I got that from the most recent TeeChart installation package in my downloads folder. I just went to the customer portal to see what my downloads there are, but scanning my emails, I found multiple customer numbers. However, whatever I am using, I am most definitely willing to upgrade to the newest version today. I will look into that since this project has become so reliant on them. I may even go with the source code version...I'll see what the money people say.

NUZ

Edit: I upgraded just now to the non-source pro version. I have not installed it yet as the order is still processing.

[Yeray]

Hello,

Then I guess it will be TeeChart v2025.44.
Can you also please tell me what target platform are you using? I may need to send you all the units for the target platforms you use to avoid "the unit xxx was compiled with a different version of yyy" errors.

Note you can know what TeeChart version you are using at design time opening the about box from a TChart in a form.
And you can know what TeeChart version is used to build with:

Code: Select all

uses TeeConst;
//...
  Caption:=TeeMsg_Version;

[JNuzzi]

Windows 32-bit, 64-bit, 64-bit (Modern) Debug and Release...so, i guess, all of them

[JNuzzi]

To make it easier, I am just going to upgrade to the source version. Trying to get that straightened out now.

[JNuzzi]

OK, new license achieved. If you want to just do the source diff, that should work.

Thank you, again...

NUZ

[Yeray]

Hello,

Oh, that's good news!
I've split the diff in two parts so you can apply them independently if you want:

- Fix for #833: CircularGauge labels misaligned

Code: Select all

--- a/TeeCircularGauge.pas
+++ b/TeeCircularGauge.pas
@@ -789,6 +789,15 @@ begin
 
     TTeePanelAccess(ParentChart).TryAssignFont(Axis.Texts.Font);
 
+    case Axis.LabelsFormat.TextAlignment of
+      taLeftJustify:
+        ParentChart.Canvas.TextAlign:=TA_LEFT;
+      taCenter:
+        ParentChart.Canvas.TextAlign:=TA_CENTER;
+      else
+        ParentChart.Canvas.TextAlign:=TA_RIGHT;
+    end;
+
     if tmpStep=0 then
     begin
       // Calculate best label increment based on radius, font size and TotalAngle:
-- 

- Feat: use MarginToAxis in CircularGauge

Code: Select all

--- a/TeeCircularGauge.pas
+++ b/TeeCircularGauge.pas
@@ -724,6 +724,7 @@ var
   tmpXRadius,
   tmpYRadius,
   tmpW,
+  tmpMargin,
   t: Integer;
 
   P3Plus,
@@ -823,6 +824,8 @@ begin
       else
          tmpFontH:=0;
 
+      tmpMargin:=Round(tmpFontH*Axis.Texts.MarginToAxis*0.01);
+
       if (IRange <> 0) and (tmpStep <> 0) then
       begin
         tmpValue := 0;
@@ -864,11 +864,13 @@ begin
               tmpAngle2 := CalcAngleFromLength(P4,0)*0.5;
 
               if LabelsInside then
-                 P3 := CalcPoint(tmp - tmpAngle2, ICenter, tmpXRad -
-                                (tmpFontH * 0.25), tmpYRad - (tmpFontH * 0.25))
+                 P3 := CalcPoint(tmp - tmpAngle2, ICenter,
+                                 tmpXRad - (tmpFontH * 0.25) - tmpMargin,
+                                 tmpYRad - (tmpFontH * 0.25) - tmpMargin)
               else
                  P3 := CalcPoint(tmp - tmpAngle2, ICenter,
-                                 tmpXRadius + tmpFontH, tmpYRadius + tmpFontH);
+                                 tmpXRadius + tmpFontH + tmpMargin,
+                                 tmpYRadius + tmpFontH + tmpMargin);
 
               {$IFDEF FMX}
               TCanvasAccess(ParentChart.Canvas).IUseTextCenter:=True;
@@ -885,7 +888,7 @@ begin
 
               if LabelsInside then
               begin
-                P3:=CalcPoint(tmp, ICenter, tmpXRad - tmpHalf, tmpYRad - tmpHalf);
+                P3:=CalcPoint(tmp, ICenter, tmpXRad - tmpHalf - tmpMargin, tmpYRad - tmpHalf - tmpMargin);
 
                 (*
                 tmpAngle2 := tmpAngle - 90;
@@ -898,7 +901,7 @@ begin
 
               end
               else
-                P3:=CalcPoint(tmp, ICenter, tmpXRadius + tmpFontH, tmpYRadius + tmpHalf);
+                P3:=CalcPoint(tmp, ICenter, tmpXRadius + tmpFontH + tmpMargin, tmpYRadius + tmpHalf + tmpMargin);
 
               {$IFDEF FMX}
               P3.Y:=P3.Y-tmpHalf;

Don't forget to rebuild the sources (with TeeRecompile) after applying the changes.
And don't hesitate to let us know if you find any problem with this!