Tutorial 2 - Chart display properties |
Contents page Previous | Next |
Chart display features are those which affect the overall appearance of the Chart. They include those properties and methods that define the colour of the Chart background, Titles and their position, margins, borders and bevels, background images, frame and axis visible, pen colours and widths, 3D, walls, etc.
Nearly all these properties are available via the Chart Editor at design or runtime and you may modify these properties programatically at runtime.
The overall Chart appearance characteristics are a grouped into these categories:
General
Axis
Titles
Legend
Panel
Walls
3D
These are the groupings you will find if you open the Chart Editor and browse the Chart pages. Other properties affect the 'look' of your Chart. These include Series colours and mark characteristics, individual Axis and Grid display properties and labelling. These will be dealt with in later tutorials.
The demo that accompanies this tutorial is called DisplayProject and can be found in the "Examples\Chart display" folder below your TeeChart installation folder.
Add a new Chart to a Form and you will see it displays in 3D with a grey panel background, 2 walls (Bottom and Left), Frame (which defines the Frame of the Chart's plottable area) and a default Chart Title Header "TeeChart".
Right click on the chart and select 'Properties' from the menu to access the Chart Editor. The first page is the Series page which is empty of Series at the moment and which we'll look at in another tutorial. Select the second Chart tab 'General' to access the General Chart properties page.
General options include Print Preview and Chart Export (See later Tutorials on Printing and Exporting Charts) plus the 3 following sections:
Margins(%)
Zoom
Allow Scroll
See the Zoom and Scroll tutorial for more information about scrolling.
Margins
Margins are defined as the distance between the Chart Border and the Chart Frame and are expressed as a percentage of the overall dimensions of the Chart Panel.
Moving the spin boxes in the Chart Editor Margins box will show you at design time the effect ofchanging each Margin.
Runtime properties are:
Chart1.MarginTop Chart1.MarginLeft Chart1.MarginRight Chart1.MarginBottom
The example applied in the demo project uses an UpDown button:
procedure TForm1.UpDown3Click(Sender: TObject; Button: TUDBtnType); begin Chart1.MarginTop := 30 - UpDown3.Position; end;
Control of the axes is quite an involved area at its greatest level of intricacy and is dealt with in greater depth in a later tutorial. Here we will cover the fundamentals of Axis and Frame display.
The second Chart page holds the properties for defining axis and frame characteristics.
There are 5 axes in the Chart. Left, Top, Right, Bottom and Depth. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features. The Depth initialises by default as not Visible. All other Axes are visible from the moment that a Series is added to the Chart and associated with those Axes (Left and Bottom as default).
The key properties to enable display of axes and frame are:
Show Axis
This checkbox enables or disables display of all 4 axes. If the Frame is visible then a Chart surround is still visible when the axes are hidden. The result will be the appearance of a larger Chart as no area is reserved for axis labels.
Runtime
Chart1.AxisVisible := True;
Axis: Left, Right, Top, Bottom and Depth Visible
Runtime
eg.
Chart1.BottomAxis.Visible = False
The Titles page of the Chart Editor controls the characteristics of the Chart Titles, Header and Footer.
Text
Use the dropdown Combobox to select either Title or Footer. Enter the required text in the Textbox. You may type multiline titles.
Runtime:
The Text property of TChartTitle is a TStrings component. You may add several lines to the Header:
eg.
With Chart1.Title.Text do begin Add('My First Line'); Add('My Second Line'); end;
You may then modify lines of text:
eg.
With TChart1.Text do begin Text(0) := 'my1stline revised'; end;
Alignment
Alignment refers to the Title (or Footer) alignment with respect to the Chart area NOT the overall Chart Panel. The Chart area is the plottable area of the Chart plus Axis Labels and Legend.
Runtime:
Chart1.Title.Alignment := taCenter;
Font
Runtime:
Chart1.Foot.Font.Name := 'Times New Roman'; Chart1.Foot.Font.Bold := True;
Border
Pattern
Patterns refers to the background pattern of the Title or Footer box.
The default is Clear. The selected Pattern will sit behind the Text.
Runtime:
eg.
Chart1.Title.Brush.Style := bsFDiagonal;
Visible
Toggle On/Off Legend display
Runtime:
Example using a Checkbox to control Legend display.
If Checkbox1.Checked := true then Chart1.Legend.Visible := true; else Chart1.Legend.Visible := False;
Back Color, Font and Frame
Runtime
With Chart1.Legend do begin Color := clBlue; Font := "Times New Roman"; Frame.Width := 2; end;
Position and Margin
Margin defines the distance between the Legend and the Chart.
Resize Chart
Resize Chart defines whether or not the Chart will leave space for the Legend when it paints. This allows the Legend to be placed within the Chart area.
Runtime:
eg.
Chart1.Legend.ResizeChart := True;
Dividing Lines
Used to draw lines within the Legend box between Legend entries.
Runtime:
eg.
Chart1.Legend.DividingLines.Visible := True; Chart1.Legend.DividingLines.Color := clBlue;
Shadow
Properties for display of the Legend box Shadow. You may define colour and size.
Runtime:
eg.
Chart1.Legend.ShadowColor := clYellow;
%Top position
Defines the Legend box displacement from the top of the Chart Panel.
Runtime:
eg.
Chart1.Legend.TopPos := 20;
%Color width
Defines the width of the colour boxes within the Legend.
Runtime:
eg.
Chart1.Legend.ColorWidth:=20;
The TeeChart Panel page allows you to set parameters which can greatly enhance the appearance of the Chart. Panel Gradient effects are best seen by monitors that support true colour but some colour combinations on 255 colour screens are very acceptable.
By now you are familiar with TeeChart properties so we won't run through all the properties here. Panel properties and methods may be accessed via the TChart component.
Key areas are:
Bevel Inner/Bevel Outer/Width
These properties will give a variety of 3D effects to the Border of the Chart panel. Modify them at design time to see how they affect the Chart border bevels.
Border
You may define Border independantly or in conjunction with to the Bevel properties. With Border set to Visible True you will obtain a 'sunken' effect border on the outside of the Chart Panel. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.
Panel Color
Panel colour will paint the whole Chart background with the chosen colour. If you select to view a background Gradient or BackImage they will hide the Panel colour. If you set a Back colour it will replace the Panel colour in within the Chart Frame only.
Back Color
Back colour defines the colour within the Chart Frame only.
Gradient
To define a Gradient you must select a StartColor and EndColor and enable as Visible the Gradient. The Gradient will cover the whole Chart panel. Gradient direction defines the direction of colour degradation between StartColor and EndColor.
Runtime:
eg.
With Chart1.Gradient do begin StartColor := clBlue; EndColor := clWhite; Direction := gdTopBottom; Visible := true; end;
BackImage
You may select any bitmap (.bmp) file as BackImage. the BackImage may be centred, tiled or stretched on the Chart Panel, or may be restricted to within the Chart Frame boundaries.
Runtime:
Use BackImage.LoadFromFile to add a BackImage to a Chart at runtime.
eg.
With OpenPictureDialog1 do if Execute then Chart1.BackImage.LoadFromFile(OpenPictureDialog1.FileName);
There are 3 Walls, Left, Bottom and Back, that may be represented in 2D or 3D.
Wall properties are accessible via:
TChart1.View3DWalls
TChart1.LeftWall
TChart1.BottomWall
TChart1.BackWall
Wall Border
The visible property enables/disables display of the Border. In the case of the BackWall, where axes are Visible the Wall Border will be hidden behind those axes so you will only see the result of enabling/disabling the Border if you hide some or all axes (eg. Make axes Top and Right invisible to see the result of toggling the Wall Border visible property eg. Chart1.BackWall.Pen.Visible := True;).
See
Pen for other characteristics of the Border Pen. You can change these properties to see the result at design time.3D is extremely flexible in TeeChart Pro version 4. You now have the option to display the Chart as:
2D | Flat Chart, viewed from front |
3D Orthogonal | 3D represented by vectored Lines to indicate depth |
3D Native Windows | 3D using 3D Canvas with 180º Chart rotation |
3D Open GL | 3D using Open GL Canvas with 360º Chart rotation |
Editor options:
3 Dimensions
Selecting this property (toggling) will change the Chart from a 3D to a 2D Chart in design time and the setting will take effect for runtime.
3D %
Controls the depth of the 3D effect. Changing the value of this property will show you at design time the effect of changing the 3D percentage.
Runtime properties are:
3D visible
Chart1.View3D3D%
Chart1.Chart3DPercentThe Orthogonal Option, when disabled, enables Windows Native 3D mode allowing you to Rotate, Elevate and offset the Chart. The Zoom option allows you to bring forward or move away the whole Chart. Zoom internally in the Chart on Data Series is still available at runtime.
![]() |
![]() |