Difference between revisions of "TAChart documentation"

From Lazarus wiki
(Multi-valued sources)
Line 254: Line 254:
These values are stored in the <code>YList</code> field of the source data item.
These values are stored in the <code>YList</code> field of the source data item.
The number of Y values is determined by the <code>YCount</code> property.
The number of Y values is determined by the <code>YCount</code> property.
Note that the first Y value is stored in Y field anyway, so <code>YCount</code> = 3
Note that the first Y value is stored in Y field anyway, so <code>YCount=3</code>
means that values are stored in <code>Y</code>, <code>YList[0]</code> and <code>YList[1]</code>.
means that values are stored in <code>Y</code>, <code>YList[0]</code> and <code>YList[1]</code>.

Revision as of 11:01, 15 August 2011

English (en) русский (ru) українська (uk) 中文(中国大陆)‎ (zh_CN)



TAChart is a package for drawing graphs, charts and other diagrams. It is comparable in features, but not specifically compatible, with Delphi TeeChart package. One substantial difference is that some features (e.g. data sources and axis transformations) are implemented via separate components instead of just properties. This leads to increased flexibility and opportunity for code re-use, but at the cost of some additional API complexity.


Series are the central part of TAChart. Most of the series represent data taken from data sources in graphical ways, such as lines or bars.

Constant line series

This is the simplest series type, representing "infinite" vertical or horizontal line. It can be used as "central axis" in function graphs or as a draggable marker.

Also, by setting Active=true, Pen.Style=psClear and UseBounds=true and appropriate AxisIndexX, it becomes an "axis extender", making sure that given Position will always by included in the axis range.

Basic series

Basic series are most often used, and include line, bar and area series. All basic series can be "stacked" by using multi-valued source. Also, all basic series fully support rotation and 3-D drawing.

Line series

TLineSeries can be used to draw a given set of points, optionally marking them with shapes and connecting with lines.

You can get a "stepped" look by setting LineType property to ltStepXY or ltStepYX.

Fast lines

Some charting packages include special "fast line" series to quickly draw line series from extremely large datasets (10000+ points). Instead, TAChart contains an optimized fast path inside standard line series code, achieving comparable drawing speed. Line series will be drawn very fast if all of the following are true:

  • There are no marks.
  • There are no pointers.
  • LineType is not ltFromOrigin.

Some operating systems/widgetsets may additionally require that LinePen.Style=psSolid and LinePen.Width=1.

Additional speedups will be available if Source.Sorted=true.

You can measure line speed drawing on your platform with the "line" demo.

Bar series

TBarSeries represents data as a set or bars, extending from ZeroLevel to data points.

You can control bar width with BarWidthPercent property. Note that the it is measured relative to the neighboring bars. If the X values are not equidistant, bars will have varying width. To prevent that, set BarWidthStyle=bwPercentMin.

You can draw multiple bar series side-by-side by using BarOffsetPercent property.

Area series

TAreaSeries represents data as a polygon extending from the data points to either ZeroLevel line or infinitely down (if UseZeroLevel=false).

You can get a "stepped" look by setting ConnectType property.

Multi-value series

Multi-value series require multi-valued data source, and use additional Y values as extra parameters to draw complex shapes.

Bubble series

TBubbleSeries represent data as a circles of variable radius centered at data points. This series requires source with YCount of at least 2, and uses first additional Y value as radius.

Box-and-whiskers series

TBoxAndWhiskerSeries represents data as rectangles with a medium line and two T-like shape protruding in both directions. Although in statistics box-and whiskers plot is supposed to be based on specific data quartiles, TAChart does not enforce this, allowing users to draw arbitrary plots.

With some effort, box-and whiskers series may be used to represent other charts different in meaning, but similar in appearance, such as Gantt diagram or Candlestick chart.

This series requires source with YCount of at least 5, and uses Y values as follows:

Index Usage
0 Lower whisker
1 Lower box bound
2 Medium line
3 Upper box bound
4 Upper whisker

Open-high-low-close series

TOpenHighLowCloseSeries represent data as a vertical lines with two ticks, as described here.

It usually requires YCount of at least 4, and uses Y values as follows:

Property Default Usage
YIndexLow 0 Lower point of line
YIndexOpen 1 Left-facing tick position
YIndexClose 2 Right-facing tick position
YIndexHigh 3 Upper point of line

Note that although Y values are supposed to be ordered ascending along the table above, the series does not enforce this and will draw any supplied data.

Radial series

Radial series ignore axis transformations. You can see examples of radial series in the "radial" demo.

Pie series

TPieSeries draws pie charts.

For each data point, pie series interprets Y value as a relative size of the slice, and X value as a distance of splice from the center of the pie (only if Exploded property is true). Slice colors can be set in data items, or taken from the hard-coded list.

Pie radius can be either set manually by FixedRadius property, or calculated automatically so that the whole series, including all labels, exactly fits the parent chart.

There are several options for label positioning, controlled by MarkPositions property:

  • pmpAround -- marks are drawn outside the pie, on the continuation or radius vector for each slice
  • pmpInside -- marks are drawn inside each slice
  • pmpLeftRight -- marks are drawn directly to the left or to the right of slice

If RotateLabels is true, each label is additionally rotated so that (if LabelFont.Orientation=0) it is parallel to the radius vector of its slice.

Polar series

TPolarSeries represents data as points in polar coordinates.

The origin of the polar coordinate system is defined in graph coordinates by OriginX and OriginY properties.

For each data point, X value is interpreted as an angle in radians and Y value -- as a distance from the center.

User-drawn series

Provides OnDraw and OnGetBounds events to allow arbitrary custom drawing on the TChart. Note that using TChart.Canvas directly is highly discouraged an will often not as expected.

Functional series

Functional series are recommended way to draw functional plots as opposed to, for example, pre-calculating function data and using line series. They provide scale-independent controls of smoothness vs drawing speed.

You can see examples of functional series in "func" demo.

Function series

TFuncSeries represents a one-dimensional function defined by OnCalculate event as a line.

The function is calculated for each Step pixels of the image, so you can use this property to increase "smoothness" or drawing speed.

DomainExclusions property allows to exclude some intervals from the function domain. Function series correctly draws discontinuity points set by DomainExclusions. Currently, DomainExclusions can only be set at run-time.

B-spline series

TBSplineSeries draws B-spline of given Dergee using De Boor's algorithm.

Spline segments shorter then Step pixels are represented by straight lines.

Cubic spline series

TCubicSplineSeries draws cubic spline using standard Numlib package from the FPC.

The spline function is calculated for each Step pixels of the image, so you can use this property to increase "smoothness" or drawing speed.

Data source must contain at least 4 points and have strictly increasing X coordinate.

If there are too few points, and csoDrawFewPoints option is set, line will be drawn instead of spline using BadDataPen.

If X values are unordered and csoDrawUnorderedX option is set, spline will be drawn ignoring offending points using BadDataPen.

csoExtrapolateLeft and csoExtrapolateRight options enable natural extrapolation to the left and to the right correspondingly.

Color map series

TColorMapSeries represent 2-dimensional function defined by OnCalculate event as a field of pixels, with color depending on function value.

The field is drawn as a set of rectangles of size StepX by StepY pixels. The function is called once for each rectangle.

Color values are defined by ColorSource, which must be sorted. For each data point is interpreted as having X value correspond to Color value. If the actual value falls between color levels, it can be either linearly interpolated (if Interpolate=true) or rounded down to the nearest level.

When Legend.Multiplicity=lmPoint, color map series will display color levels in the legend.


Data can get into a chart from various sources. They are implemented as a set of components derived from TCustomChartSource.

To assign a source to a series, you can set the Source property. If the property is left unassigned, the series will use its own built-in list source. Methods like AddXY are delegated to the current series source. Note that the list source is the only editable source, so after you assign, for example, a random chart source to the series, a call to AddXY will raise an exception.

Each data item has the following fields: X, Y, YList, Color, Text.

Sorted sources

If it is known that X values of the source are ascending, some additional optimizations like binary search become possible. So all sources have IsSorted property which helps determine that.

Multi-valued sources

Sources can contain multiple Y values for each X value. These values are stored in the YList field of the source data item. The number of Y values is determined by the YCount property. Note that the first Y value is stored in Y field anyway, so YCount=3 means that values are stored in Y, YList[0] and YList[1].

Additional values may be used by various series -- for example, stacked bars or bubble charts.

List source

TListChartSource is a basic chart source, storing chart data inside itself. As such, you can use Add and Delete functions to change source data.

The source also has DataPoints property to allow setting data at design time. This property is a TStringList, with each line representing a data point. Line consists of X, Y, optional YList, Color and Text values separated by | (vertical bar) character. Note that DataPoints property is designed primarily for sample and demo code. It is very inefficient, and you should not use it to add data points from the code.

You can control X value sorting by setting the Sorted property. Note when Sorted is set to true, list source sorts the data and keeps it sorted after insertion of new points. If inserted points are not sorted, this may result in quadratic running time. You should either set Sorted to true only after insertion, or pre-sort your data to avoid this.

Random source

TRandomChartSource source generates random data in the given range and is intended mostly to use in demos. You can also use it as design-time replacement for you actual data source. This will let you see and change the look of your chart without having to run the application.

Each random source uses its own independent random number generator to guarantee stability of its values.

User-defined source

This source may be used if you already have your data in memory, but in a format different from the data items used in TAChart. Using user-defined source to access your data directly instead of first moving it all into a list source may (or may not) be beneficial for speed.

You can of course also generate, filter or modify data with the user-defined source.

Note that if the Sorted property is set to true, it is the responsibility of the event handler to provide actually sorted data.

Database source

TDbChartSource takes data directly from a database. It is contained in a separate unit to avoid introducing a db-aware component dependency into every project using TAChart.

The following properties contain database field names for data item fields:

Property Access method
FieldX AsFloat
FieldY AsFloat
FieldColor AsInteger
FieldText AsString

If FieldX property is empty, RecNo is used instead.

To get multi-valued source, set FieldY property to a comma-separated list of field names. Note that YCount will be set automatically -- trying to set it by hand will raise an exception.

Calculated source

TCalculatedChartSource is the source used for manipulating data taken from the Origin source. This source performs transformations in the following order:

  • Y reordering -- Y values of multi-valued source can be duplicated, removed or exchanged according to ReorderYList property, which is a comma-separated list of original Y value indexes. Step skipped if ReorderYList is empty.
  • Accumulation -- replaces each item's Y values by some function (for example, sum or average) of the last AccumulationRange items. Step skipped if the AccumulationMethod property is camNone.
  • Percentage -- replace each Y value by the percentage of total of all Y values for that item. Useful for drawing "stacked percentage" bar and area charts. Step skipped if the Percentage property is false.

Interval source

TIntervalChartSource can supply arbitrarily many points in a given interval, controlled by various properties of the source. This source is the default built-in source for axis marks. If you want to set the same axis interval parameters for several axises, you can assign a single TIntervalChartSource component the Marks.Source of each of those axises.

Date-time interval source

TDateTimeIntervalChartSource is similar to the TIntervalChartSource, but provides marks formatted as date/time values. This source automatically selects appropriate calendar interval (such as week or hour) depending on the axis scale.

Note that X values of provided data items are TDateTime values, and Label values contain formatted date-time strings. If you want to use TDateTimeIntervalChartSource as the source of axis marks, you should probably set Marks.Format or Marks.Style properties to make use of provided labels.

If the DateTimeFormat property is set, it is used to format all labels. Formatting is performed with standard SysUtils.FormatDateTime function. If DateTimeFormat is empty, format is chosen automatically based on scale.

Source optimization notes

Primary data source API allows random access. Nevertheless, many sources, in particular random, database and calculated, may exhibit quadratic or worse behavior if actually accessed randomly. TAChart itself takes care to only use sequential access (although it may require several passes). Sources optimize sequential access by using internal state. User code should be careful not to reset this state during chart drawing from event handlers or custom series code.

A notable exception is the list source, which is guaranteed to provide fast random access. It may be used to cache slow sources with the help of CopyForm procedure.

Coordinates and axises

TAChart uses three coordinate systems:

  • Axis coordinates (known in some other applications as object coordinates) -- this is the "raw" coordinate values obtained from the data. As the name implies, axis coordinates are interpreted in terms of specific axis -- the same coordinate value may have different meaning depending on the axis it is applied to.
  • Graph coordinates (aka world coordinates) are converted from the axis coordinates using axis transformation, such as logarithmic scale. Graph coordinates are common for all objects in the chart.
  • Image coordinates (aka screen coordinates) are converted from graph coordinates based on the chart viewport. This transformation is always linear and can be influenced by chart tools such as zooming and panning.

You can add or remove an arbitrary number of axises by editing AxisList property. By default, chart have two axises: one horizontal and one vertical. They are accessible via BottomAxis and LeftAxis properties. Note that those properties are aliases to AxisList[0] and AxisList[1], so if you remove those default axises, accessing BottomAxis and LeftAxis will return nil.

Visually, axis consists of the axis line (drawn by AxisPen), grid lines (drawn by GridPen), ticks, marks and arrow.

Each axis is drawn inside its own rectangle, determined by the size of mark labels and ticks. By assigning several axis the same positive Group number, you can have them share the same rectangular area. Grouped axises can be used to achieve "panes" look, when several series are drawn on different portions of the same graph.

Axis transformations

Axis transformations are grouped in the TChartAxisTransformations component. It contains a list of transformations which are applied in the order given. (For example, performing scale before and after logarithm will yield different results).

For transformations to have an effect, you should:

  • Make sure Enabled property is true for all transformations.
  • Assign transformations component to Transformations property of at least one axis.
  • Assign AxisIndexX and/or AxisIndexY properties of the series to the appropriate axis index.

Note that by default, AxisIndexX and AxisIndexY have a special value of -1, which means "ignore axis transformations". Also note that if you add or remove axises, the indexes may change. You can rotate the series by assigning both AxisIndexX to vertical axis and AxisIndexY to the horizontal axis.

Linear and logarithmic transformation

Those are simple arithmetic transformations.

Auto-scaling transformation

To display several independently scaled series, assign them to two or more axises and apply TAutoScaleAxisTransform to each axis. See "axistransf" demo, page "Linear", checkbox "Auto scale".

By using MinValue and MaxValue properties you can control the in graph coordinates of the auto-scaled series. For example, by setting one transformation to a range from 0 to 1, and another to a range from 1 to 2, you will confine all the series using the first transformation to the upper half of the chart, and all the series using the second transformation to the lower half (assuming there are no unassigned series left).

User-defined transformation

You can create you own transformation either by inheriting from TAxisTransform, or, if you prefer "visual" programming, by using TUserDefinedAxisTransform. In either case there are two basic requirements:

  • AxisToGraph and GraphToAxis functions should be defined everywhere in data range and inverse of each other (for example, avoid now only dividing, but also multiplying by zero).
  • functions should be monotonic.

Date and time axises

Using date/time values for axis marks is a common requirement. Proper way to do this depends on the exact nature of date/time data:

  • If the data is actual TDateTime values, use it as X coordinate in points, assign TDateTimeIntervalChartSource to the Marks.Source of the corresponding axis, and change Marks.Style to smsLabel. TDateTimeIntervalChartSource provides automatic labeling depending on the scale in wide range -- from centuries to milliseconds.
  • If the data is in physical units, but outside TDateTime values range, such as astronomical or micro-electronics timings, use it a normal X coordinate with custom Marks.Format.
  • If the data is in calendar units, such as months and years, which is common for financial data, you have several options:
    • If date units are "equidistant" when interpreted as numbers (for example, simple year numbers), assign the same data source to both series and axis marks, then use custom Marks.Format, Axis.OnMarkToText event or Text field of the data items to format dates per your requirements.
    • If date units are not "equidistant" (for example, numbers in YYYYMM format or even date strings), use surrogate X coordinate (usually, simply a point index) instead and display dates using methods described above.
    • Convert coordinates to TDateTime values beforehand, then use TDateTimeIntervalChartSource as described above.

Axis intervals

Axis marks are located along the axis at equal intervals chosen by the chart. The choice of intervals can be influenced via Intervals property. This property has a few subproperties, which are applied in the following order:

  • Options property contains a set of flags controlling usage of other parameters. If the flag is not in the set, corresponding parameter is ignored.
  • NiceSteps is a string containing a sequence of "step multipliers" -- floating point values in the range from 0 to 1, excluding 0. If this property is applied, the axis step will be a power of ten multiplied by one of the provided values. If several multipliers can be used, the leftmost one will be chosen. Multipliers are separated by the vertical bar (|) character.
  • If NiceSteps is ignored or TAChart fails to find appropriate step, the axis range will be divided into equal intervals without regard to the number of decimal digits in the representation of mark values. In this case, it is recommended to reduce the number of visible digits in Marks.Format.
  • MinLength and MaxLength properties set the limits of interval length in image units (usually pixels).
  • Count property is the desired number of axis marks. Among all mark steps passing the previous tests, TChart chooses the one which gives the number of marks nearest to the Count. If Count property is ignored, or there are several steps with equal number of marks, the longest step is chosen.

Note that if you set chart source manually, Intervals property may apply only partially or not apply at all. For example, list source is unable to guarantee maximum interval length, since it has only a finite number of points. See also interval chart source.

Extents and margins


Chart extent is a rectangle in graph coordinates.

There are several extents defined by TChart:

  • Full extent -- usually determined automatically as the area encompassing all the data from series and axis ranges. Returned by GetFullExtent function.
  • Fixed extent -- determined by TChart.Extent property. May override full extent calculation partially or fully.
  • LogicalExtent -- the extent requested by user to be seen on chart image. Writing to this property if the official way to change chart extent by the external code. For example, LogicalExtent := GetFullExtent is (almost) equivalent to calling ZoomFull procedure.
  • CurrentExtent -- the extent actually displayed to the user. May differ from the LogicalExtent due to the need to reserve space for series marks, inner chart margins etc.


Margin is a distance reserved around the edges of rectangular region. Margins are measured in image units (usually pixels). Chart itself have two margins:

  • Internal (Margins property) -- applied after the axises drawing. Are also influenced by series marks and series themselves.
  • External (MarginsExternal property) -- applied before the axises drawing. Are also influenced by axis marks and arrows.

Optimization notes

Calculation of CurrentExtent and actual margins is non-trivial iterative process (see TChart.PrepareAxis code for details). Although usually fast, in complex cases it can require multiple passes through chart sources.


Chart tools define reaction of the chart to various user actions, primarily mouse movements and clicks. You can see examples of tools usage in "tools" demo.

Tools are grouped in TChartToolset component, which should be assigned to chart's Toolset property. Same toolset can be used in several charts.

If Toolset is unassigned, for compatibility reasons built-in toolset consisting of drag zoom and reticule tools is used.

Each user action, tools in the toolset are processed in order, and for each tool:

  • If Enabled=false, the tool is ignored.
  • If Shift is not equal to the current shift state, the tool is ignored.
  • Tools is asked to process the action.
  • If the tool signaled that the action is handles, processing is stopped, otherwise it continues to the next tool.

In you application you can create, for example, a toolbar with each button enabling corresponding tool in the toolset and disabling all others. Alternatively, by assigning different Shift values, you can enable several tools at once.

Drawing mode

Some tools, such as drag zoom or crosshair, display moving shapes over the chart with the mouse movement.

There are two ways to display those shapes: either simply draw them over the chart, fully redrawing the chart upon each mouse movement, or use pmXor pen mode to draw and erase the shape directly from the MouseMove event handler. The former method allows to use arbitrary pen color and style, but the latter is much more efficient. Additionally, some widgetset ignore all drawing outside the Paint event, so the latter method will not work at all.

Display method is controlled by DrawingMode property with the following values:

  • tdmXor -- use XOR method;
  • tdmNormal -- use full chart redraw;
  • tdmDefault -- use XOR method on widgetsets where it is known to work (Windows and Gtk) and full redraw on others.

Extent tools

Extent tools modify chart's logical extent.

Zooming tools can be animated by setting AnimationSteps to the value greater then 1 and AnimationInterval (in milliseconds).

Panning tools can be restricted to the chart extent on all or some directions by using LimitToExtent property.

Zoom drag tool

TZoomDragTool allows user to zoom in by drawing rectangle with the mouse. The rectangle then becomes the new logical extent. Drawing rectangle "in reverse", from the bottom-right to the upper-left corner, restores zooming to the full extent.

RatioLimit property lets you restrict zooming to one of the coordinates, or require it to keep original proportions.

Zoom click tool

TZoomClickTool allows user to zoom in or out clicking on the chart with the mouse. ZoomFactor is the multiplier of scale applied by the tool, so factors below 1 represent zoom out, and factors above represent zoom in. ZoomRatio allows to set non-proportional zoom by indicating ratio of X to Y scale.

If FixedPoint is true, the location of the mouse click is used as a fixed point for zooming, otherwise chart image center is used instead.

Pan drag tool

TPanDragTool allows user to move logical extent by dragging mouse in the directions indicated by Directions property.

Pan click tool

TPanClickTool allows user to move logical extent by clicking inside Margins pixels from the corresponding border of chart image.

The panning offset is determined by the distance from the edge of the chart (the nearer to the edge, the greater). Setting Interval in milliseconds will allow to continue panning with the given interval until the moue button is up.

Data tools

Data tools are linked to specific data series via AffectedSeries property, which is a string of comma-separated series indexes. Note that indexes may change if you add or remove series.

When the data tool is activated, it determines the nearest point of the affected series which is located inside of the GrabRadius (in pixels).

Data point drag tool

TDataPointDragTool allows user to change data values by dragging the data point. Note that this requires series' data source to be a list source.

Data point click tool

TDataPointClickTool allows you to assign OnPointClick event handler, which will be called when the user clicks on the data point.

Data point hint tool

TDataPointHintTool displays hint when the user moves the mouse over the data point. The hint is either equal to the point label (if UseDefaultHintText=true) or determined by calling OnHint event handler.

Data point crosshair tool

TDataPointCrosshairTool displays a cross-hair centered on the data point.

Reticule tool

Reticule tool is deprecated. Use TDataPointCrosshairTool instead.

User defined tool

To add you own tool, either inherit from TUserDefinedTool or use it directly, assigning one or more On{After,Before}{KeyDown,KeyUp,MouseDown,MouseMove,MouseUp} event handlers.

Decorative elements

Title and footer

Chart title and footer are multi-line texts appearing above and below the chart correspondingly. They support various rotations and alignments.


Chart legend is a table with each item containing an icon and a text line.

Legend supports various alignments and can be located inside the chart or on the sidebar. Legend can be displayed in two or more columns by setting ColumnCount property. Setting ColumnCount to a very large value effectively creates "horizontal" legend.

Legend items are generated based on chart series which have both Active and ShowInLegend set to true. Depending in Legend.Multiplicity series can produce a single item or one item per point.

Legend items can be grouped together under sub-headers. Sub-headers are taken from GroupNames property, and each series can use Legend.GroupIndex property to indicate its group.

Legend items are sorted as following:

  • By group index, items without group (GroupIndex=-1 going first to avoid confusion with the last group).
  • By Order property, items without explicit order (Order=-1) going last.
  • By creation order of series.
  • For multiple items per series, by generation order (for standard series it is the order of points).

User-defined legend items

Arbitrary legend items can be generated by overriding OnCreate and OnDraw events of series Legend property.

Note that user-defined item count is controlled solely by UserItemsCount property and does not depend on Multiplicity. Also note that GroupIndex and Order properties are actually per-item, so you can totally override entire legend from a single (perhaps fictive) series.


Arrowheads can be drawn at the end of axis lines, controlled by TChartAxis.Arrow property.




For low-level drawing routines, TAChart uses special set of classes implementing IChartDrawer interface. This allows such features as printing charts and exporting them to SVG format.

These classes are called drawing back-ends or drawers for short.

TCanvas drawer

TCanvasDrawer is the default drawer used to display chart on TCanvas. This includes screen and various raster image formats. The image produced by this drawer is used as a reference when developing and debugging other back-ends.

TFPCanvas drawer

TFPCanvasDrawer is similar to TCanvas drawer, but based on TFPCanvas, which is TCanvas implemented in FCL instead of LCL.

See "nogui" demo for an example.

Although TFPCanvas and, correspondingly, TFPCanvasDrawer have limited implementation of some TAChart features, their important advantage is possibility of compiling the application with nogui widgetset. So it can be used in Web applications to generate raster chart images without the need for X/Gtk/Qt in server.

SVG drawer

TSVGDrawer produces text stream with the image of the chart in SVG format. Similarly to TFPCanvas drawer, it is independent of LCL and can be used in Web applications to generate vector charts in nogui widgetset.

See "svg" demo for an example.

For this drawer, image unit is an SVG canvas unit instead of a pixel.

Note that due to the nature of SVG, there is no way to measure font dimensions, so they are approximated crudely. This may result in problems like label text not fitting in the mark rectangle, especially in browsers like Firefox that do not support textLength attribute.

OpenGL drawer

TOpenGLDrawer draws chart on the current OpenGL context. It is suitable be used in games and other OpenGL-only applications.

OpenGL drawer expects, but does not set by itself, orthogonal projection. See "opengl" demo for an example.

Note that, like in OpenGL itself, TOpenGLDrawer font support is extremely limited.

Printer drawer

TPrinterDrawer draws chart on the printer canvas. It does not flush the page.

Although printer canvas is a descendant of TCanvas, and so printing can be done using the default drawer, TPrinterDrawer does proper re-scaling of image coordinates according to printer vs screen DPI.

You can use this drawer to export chart to PDF format using one of the available PDF writer products.

See "print" demo for an example.

Note that this drawer is located in a separate TAChartPrint package.

AggPas drawer

TAggPasDrawer draws chart using AggPas library.

AggPas offers high-speed antialiased drawing and is included in Lazarus sources. Unfortunately, the library is currently not maintained and there are some limitations in TAChart support.

Note that this drawer is located in a separate TAChartAggPas package.

BGRABitmap drawer

TBGRADrawer draws chart using BGRABitmap library.

BGRABitmap is recently created and actively developed graphics library, offering, in particular, anti-aliasing and rich selection of gradients.

Currently BGRABitmap supports all TAChart features, but is somewhat slower then other drawing methods.

Note that this drawer is located in a separate TAChartBGRA package, which depends on external bgrabitmappack package.

FPVectorial drawer

TFPVectorialDrawer draws chart using fpvectorial library. FPVectorial offers exporting to various vector formats, including SVG, PDF, CorelDraw and even instructions for metal cutting machines.

It currently has some limitations in TAChart support, but is actively developed.

Note that this drawer is located in a separate TAChartFPVectorial package, which depends on external fpvectorialpkg package.

WMF drawer

TWindowsMetafileDrawer draws chart into a Windows Metafile.

It uses WinAPI directly, and so will only work on Windows. In the future, WMF support may be added to fpvectorial, which will provide cross-platform alternative to this package.


Chart navigation consists of two parts: moving logical extent around without changing zoom factor, and visualizing the logical extent's position and size relative to the full extent.

Moving extent (but not visualizing it) is possible by using panning tools.

You can see examples in the "navigation" demo.

Scroll bars

TChartNavScrollBar is a TCustomScrollBar descendant with additional Chart property referencing the chart. TChartNavScrollBar synchronizes its position with chart extent in both directions. If the logical extent is equal to or larger then full extent, navigation scroll bar does nothing.

Setting AutoPageSize = true lets TChartNavScrollBar to pick page size proportional to the logical extent.

Note that Min and Max properties are not changed automatically. It is recommended to set Min = 0 and Max to some fairly large integer value to avoid rounding issues.

Also note that TChartNavScrollBar does not automatically align or attach itself to a chart, so it can be arbitrarily positioned on the form.

Navigation panel

TChartNavPanel component displays logical and full extent of an assigned chart as differently colored rectangles, allowing user to drag the logical extent rectangle if AllowDragNavigation = true.

If MiniMap = true, the panel additionally displays the chart series.

TChartNavPanel can have arbitrary size, but it is recommended to keep height to width proportion the same as in the assigned chart. Setting Proportional = true will enforce the same proportions even if the above condition is not met, at the cost of some wasted space on the panel.

Technical details

Drawing order

Chart drawing consists of three stages:

  1. Preparation. At this stage various internal data structures are initialized.
  2. Measurement. At this stage chart calculates the sizes of all elements, and optimizes them for best presentation. Optimization may require several iterations, so measurement stage is often the heaviest one both in terms of implementation complexity and running time.
  3. Drawing. At this stage actual chart image is displayed.

There also exists an ordering among various chart elements:

  1. Background (using TChart.Color property).
  2. Back-wall (using TChart.BackColor property).
  3. Series and axises according to ZPosition property.
    1. For each series and axis, graphic elements are drawn before marks. Note that this protects marks against hiding by the axis/series they belong to, but not by other axises/series.
  4. Legend.
  5. Tools.

Note that ZPosition works for both 2-D and 3-D charts, so you can overlay series and axises in arbitrary order.