Contents page    Previous | Next

Tutorial 5 - Legend design

See TeeChart coded Legend example in the Examples folder below your TeeChart installation folder for a working example of some of the techniques outlined in this Tutorial.

Legend control

Style tab

Legend parameters are accessible via the Chart Editor, Chart tab, Legend page.

Legend parameters. See Legend component help for more information

Legend Style
Legend default Style "Automatic" will put Series point values in the Legend when there is only one Series in the Chart. When the Chart contains more than one Series, "Automatic" will put Series names in the Legend. In the Editor, use the Dropdown Combobox to obtain values other than the default. If you change the Legend Style to display values and there is more than one Series in your Chart, TeeChart Pro will display the values of the first Series. You may modify the display using custom options. See Customising Legend content at runtime

Chart1.Legend.LegendStyle := lsLastValues;

//Puts the last value of each Series in the Legend box

Text Style
See the TextStyle property for a list of possible Legend text styles. The Text Style formats the Series entry in the Legend (e.g. Showing value as a percentage of total, etc).

Positioning the Legend (Position tab options)

Alignment
There are 4 default positions available using the Alignment property, Top, Bottom, Left and Right. Right is the default position. The default positioning of the Legend will always be outside the Chart. See the section about customising Legends for more information about positioning Legends.

Resize Chart
The Resize Chart property, when not enabled, will draw the legend within the Chart frame area. Whilst this may be satisfactory for some Legend positioning requirements, better control of Legend positioning in relation to the Chart frame can be achieved by using the Legend HorizMargin and VertMargin properties.

HorizMargin & VertMargin
Horizmargin applies to Left and Right aligned Legends. VertMargin applies to Top and Bottom aligned Legends. Changing the Horizmargin property value will move the Chart frame in relation to the Legend, NOT vice versa. Thus, making a Horizmargin value negative will move the Chart over the Legend (increasing the size of the Chart rectangle area). However, the properties are not intended for repositioning of the Legend over the Chart, to achieve this it is better to use the techniques outlined in Customising Legend content at runtime.

Custom position
Set the Legend CustomPosition property to true then set the Top and Left pixel co-ordinates of the Legend to custom position it.

Example

  With Chart1.Legend do
  Begin
    CustomPosition:=True;
    Top:=100;
    Left:=100;
  end;

Number of rows in a horizontal Legend

When the Legend is aligned horizontally (top or bottom), the number of rows can be specified:

Chart1.Legend.MaxNumRows:=3;

By default, MaxNumRows is 0 (zero), meaning the Legend will show all values using as many rows as necessary.

Colour box modification (Symbols tab of Editor)

Use the Colorwidth property to set the width of the colour boxes in the Legend.

Example

  With Chart1.Legend do
  Begin
    //move the colour boxes to the right of the value list
    Symbol.Position:=spRight;

    //set the boxes as continuous
    Symbol.Continuous:=True;

    //Make the boxes wider
    Colorwidth:=40;
  end;

  //Hide the Pen of the line between the boxes
  //The line depends on the Series itself (here a Line Series)

  Series1.LinePen.Visible:=False;

Customising Legend content at runtime

Legend events offer the option to completely control the Legend appearance and content.

OnGetLegendRect event

The Legend outer rectangle, permits changes to the overall size and position of the Legend box. Use in conjunction with OnGetLegendPos to reposition the Chart Legend and contents.

procedure TForm1.Chart1GetLegendRect(Sender: TCustomChart; var Rect: TRect);
begin
  //This moves the Legend box to the left (leaving the contents where they were !)
  //Set Chart1.Legend.ResizeChart := False; to disable resizing of the Chart
  //thus placing the Legend inside the Chart rectangle
  Rect.Left := Rect.Left - 100;
  Rect.Right := Rect.Right - 100;
end;

OnGetLegendPos event

Modifies the position of the contents of the Legend. The following example could be used with the code above to move Legend contents to the new Legend rectangle.

procedure TForm1.Chart1GetLegendPos(Sender: TCustomChart; Index: Integer;
  var X, Y, XColor: Integer);
begin
  //Moves the Legend contents to the left by 100 pixels use with OnGetLegendRect
  //Does not move colour boxes.
  X := X - 100;
end;

OnGetLegendText event

Modifies the text of the Legend contents.

procedure TForm1.Chart1GetLegendText(Sender: TCustomAxisPanel;
  LegendStyle: TLegendStyle; Index: Integer; var LegendText: String);
begin
  //Modify Legend text
  LegendText := LegendText + IntToStr(Index);
end;

When placing the Legend within the Chart rectangle area, bear in mind that the Legend paints before Series and Axes and will appear below either of those at any intersection point.

OnClickLegend event

Picks up a Legend item when clicking on the Legend.

procedure TForm1.Chart1ClickLegend(Sender: TCustomChart;
  Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
Var tmp:Integer;
begin
  tmp:=Chart1.Legend.Clicked( x,y ) ;

  if tmp<>-1 then 
     ShowMessage( 'Clicked legend item: '+ Chart1.FormattedLegend( tmp ) );
end;