Series Marks are shown partially when on the edge

[User]

Good day,

I have an issue with the marks not displaying text when they are on the edge of the chart. Please see the screenshot.

The text of marks does not fit

Marks.png (4.77 KiB) Viewed 10129 times

The code could be found further below at the bottom of this post. The form contains an instance of the unmodified TChart (Chart1).

There is a .NET thread where the following solution has been offered:

Code: Select all

FLineChart.Marks.Clip := False;
Chart1.MarginLeft := 10;
Chart1.MarginRight := 10;

Unfortunately this solution needs to be applied on the case by case basis. When the text of the mark is unknown upfront, this will not work.

Code: Select all

unit MainUnit;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMXTee.Engine,
  FMXTee.Procs, FMXTee.Chart, FMXTee.Series, FMXTee.Canvas;

type
  TForm4 = class(TForm)
    Chart1: TChart;
    procedure FormCreate(Sender: TObject);
  private
    FLineChart: TLineSeries;
  public
    { Public declarations }
  end;

var
  Form4: TForm4;

implementation

{$R *.fmx}

procedure TForm4.FormCreate(Sender: TObject);
var
  LDate: TDate;
  LDateText: string;
begin
  Chart1.AllowPanning := TPanningMode.pmNone;
  Chart1.LeftWall.Dark3D := False;
  Chart1.Legend.Visible := False;
  Chart1.Title.Text.Text := '';
  Chart1.Title.Visible := False;
  Chart1.BottomAxis.Grid.Visible := False;
  Chart1.LeftAxis.Grid.Visible := False;
  Chart1.Shadow.Visible := False;
  Chart1.View3D := False;
  Chart1.View3DOptions.Orthogonal := False;
  Chart1.View3DWalls := False;
  Chart1.Zoom.Allow := False;
  Chart1.Zoom.Animated := True;
  Chart1.Zoom.Brush.Kind := TBrushKind.None;
  Chart1.Zoom.Direction := TTeeZoomDirection.tzdVertical;
  Chart1.BevelOuter := bvNone;
  Chart1.Hover.Visible := False;

  Chart1.BottomAxis.DateTimeFormat := 'yyyy';
  Chart1.BottomAxis.LabelStyle := talNone;
  Chart1.LeftAxis.LabelStyle := talNone;

  FLineChart := TLineSeries.Create(Chart1);
  Chart1.AddSeries(FLineChart);

  FLineChart.Marks.Arrow.Visible := True;
  FLineChart.Marks.ShapeStyle := fosRoundRectangle;
  FLineChart.Marks.Visible := True;
  FLineChart.Marks.Shadow.Visible := False;
  FLineChart.Marks.Emboss.Visible := False;
  FLineChart.Marks.Pen.Style := TPenStyle.psClear;
  FLineChart.Marks.Callout.ArrowHead := ahSolid;
//  FLineChart.Marks.Clip := False;

  FLineChart.LinePen.Width := 2;

//  Chart1.MarginLeft := 10;
//  Chart1.MarginRight := 10;
//  Chart1.MarginTop := 10;
//  Chart1.MarginBottom := 10;

  LDateText := '01/11/2015';
  LDate := StrToDate(LDateText);
  FLineChart.AddXY(LDate, 300, '');
  FLineChart.Marks[0].Text.Add('Long hint text to display.');
  FLineChart.Marks[0].Text.Add('It does not fit.');

  LDateText := '06/11/2015';
  LDate := StrToDate(LDateText);
  FLineChart.AddXY(LDate, 300, LDateText);

  LDateText := '09/11/2015';
  LDate := StrToDate(LDateText);
  FLineChart.AddXY(LDate, 300, LDateText);

  LDateText := '14/11/2015';
  LDate := StrToDate(LDateText);
  FLineChart.AddXY(LDate, 300, LDateText);
end;

end.

[Yeray]

Hello,

The issue here is with the margins, not with the marks clipping.
If I simplify your example to the minimum and add two checkboxes to test the margin and the marks clip:

Code: Select all

procedure TForm1.CBMarginsClick(Sender: TObject);
begin
  if CBMargins.Checked then
  begin
    Chart1.MarginLeft := 15;
    Chart1.MarginRight := 5;
    Chart1.MarginTop := 12;
    Chart1.MarginBottom := 4;
  end
  else
  begin
    Chart1.MarginLeft := 3;
    Chart1.MarginRight := 3;
    Chart1.MarginTop := 4;
    Chart1.MarginBottom := 4;
  end;
end;

procedure TForm1.CBMarksClipClick(Sender: TObject);
begin
  Chart1[0].Marks.Clip:=CBMarksClip.Checked;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chart1.Legend.Visible := False;
  Chart1.Title.Visible := False;
  Chart1.View3D := False;

  Chart1.BottomAxis.Visible:=false;
  Chart1.LeftAxis.Visible:=false;

  with Chart1.AddSeries(TLineSeries) as TLineSeries do
  begin
    FillSampleValues(5);
    Marks.Visible := True;
    Marks[0].Text.Add('Long hint text to display.');
    Marks[0].Text.Add('It does not fit.');
  end;

  Chart1.Walls.Back.Gradient.StartColor:=RGB(255, 128, 0);
  Chart1.Gradient.StartColor:=clBlack;
  Chart1.Gradient.MidColor:=clNone;
end;

You get something like this when I run it:

first.png (17.73 KiB) Viewed 10106 times

Note the orange rect is the ChartRect; this is the area delimited by the axes, where the series are drawn.
And the black area behind is the whole TChart component. Note TChart can't draw anything out of this area.

If you set the series marks clipping, the marks will be clipped in the ChartRect area:

clipped.png (17.67 KiB) Viewed 10096 times

Instead, what you probably want is to increment the margins to fit the marks into the TChart component:

margins.png (17.71 KiB) Viewed 10097 times