Skip to main content
These examples build on basic chart knowledge and demonstrate more sophisticated features like chart tools, functions, zooming, scrolling, and data operations.

Chart Tools

Chart tools add interactive functionality to your charts.

Annotation Tools

  • Annotation Tool - Add text annotations to charts
    ~/workspace/source/VCL/TeeNew/Annotation_Tool.pas
  • Annotation Callout - Create callout-style annotations
    ~/workspace/source/VCL/TeeNew/AnnotationCallout_Series.pas

ColorLine Tools

  • ColorLine Drag Repaint - Interactive draggable color lines
    ~/workspace/source/VCL/TeeNew/ColorLine_DragRepaint.pas
  • ColorLine Draw 3D - 3D color line visualization
    ~/workspace/source/VCL/TeeNew/ColorLine_Draw3D.pas

Zoom and Scroll

  • Chart ScrollBar - Add scrollbars to charts
    ~/workspace/source/VCL/TeeNew/Chart_ScrollBar.pas
  • Axis Multi Scroll - Multiple scrollable axes
    ~/workspace/source/VCL/TeeNew/Axis_MultiScroll.pas
  • Zoom Scroll - Combined zoom and scroll functionality
    ~/workspace/source/VCL/TeeNew/ZoomScroll_Button.pas

Chart Functions

Functions process and transform data from other series.

Statistical Functions

  • All Functions - Overview of all available functions
    ~/workspace/source/VCL/TeeNew/All_Functions.pas
  • Average Function - Calculate moving averages
    ~/workspace/source/VCL/TeeNew/AverageFunction_Period.pas
  • Smoothing Function - Smooth data series
    ~/workspace/source/VCL/TeeNew/SmoothingFunction_Interpolate.pas
  • Curve Fitting - Fit curves to data points
    ~/workspace/source/VCL/TeeNew/CurveFitting_Dynamic.pas

Data Analysis

  • Trend Function - Calculate trend lines
    ~/workspace/source/VCL/TeeNew/TrendFunction_Series.pas
  • Exponential Trend - Exponential trend analysis
    ~/workspace/source/VCL/TeeNew/ExpTrend_Series.pas

Advanced Series Types

Statistical Charts

  • Box Series - Box and whisker plots
    ~/workspace/source/VCL/TeeNew/BoxSeries_CustomValues.pas
  • Error Bar - Error bar visualization
    ~/workspace/source/VCL/TeeNew/ErrorBar_Negative.pas
  • Histogram - Histogram charts
    ~/workspace/source/VCL/TeeNew/HistogramFunction_Series.pas

Financial Charts

  • Candle Series - Candlestick charts for financial data
    ~/workspace/source/VCL/TeeNew/Candle_CustomColors.pas
  • Volume Series - Volume charts
    ~/workspace/source/VCL/TeeNew/Volume_Origin.pas

Specialized Series

  • Gantt Charts - Project timeline visualization
    ~/workspace/source/VCL/TeeNew/Gantt_Connecting.pas
    ~/workspace/source/FMX/Demo/Standard/DemoGantt.pas (FMX)
  • Smith Series - Smith chart visualization
    ~/workspace/source/VCL/TeeNew/Smith_Series.pas
  • Polar Series - Polar coordinate charts
    ~/workspace/source/VCL/TeeNew/Polar_AngleInc.pas

Custom Axis Features

Multi-Axis Charts

  • Axis Multi Runtime - Create multiple axes at runtime
    ~/workspace/source/VCL/TeeNew/Axis_MultiRuntime.pas
  • Axis Custom - Custom axis configuration
    ~/workspace/source/VCL/TeeNew/Axis_Custom.pas

Axis Formatting

  • Axis Exponent - Scientific notation for axis labels
    ~/workspace/source/VCL/TeeNew/Axis_Exponent.pas
  • Axis Millisec - Millisecond time formatting
    ~/workspace/source/VCL/TeeNew/Axis_Millisec.pas
  • Axis Labels Format - Custom label formatting
    ~/workspace/source/VCL/TeeNew/Axis_LabelsFormat.pas
  • Axis Labels Alternate - Alternating label positions
    ~/workspace/source/VCL/TeeNew/Axis_LabelsAlternate.pas

Grid Customization

  • Axis Minor Grid - Minor grid lines
    ~/workspace/source/VCL/TeeNew/Axis_MinorGrid.pas
  • Axis Grid Zoning - Grid zone highlighting
    ~/workspace/source/VCL/TeeNew/Axis_GridZoning.pas
  • Axis Grid Band Centered - Centered grid bands
    ~/workspace/source/VCL/TeeNew/Axis_GridBandCentered.pas

Export and Printing

Export Examples

  • Chart Print Preview - Print preview functionality
    ~/workspace/source/VCL/TeeNew/Chart_PrintPreview.pas
  • Export Native - Export charts in native format
    ~/workspace/source/VCL/TeeNew/Export_Native.pas
  • Export Picture - Export as image files
    ~/workspace/source/VCL/TeeNew/Export_Picture.pas

FMX Export Examples

  • Export Image - FMX image export
    ~/workspace/source/FMX/Demo/Export/ExportImage.pas
  • Export PDF - FMX PDF export
    ~/workspace/source/FMX/Demo/Export/ExportPDF.pas

Stacking and Grouping

Bar Stacking

  • Bar Self Stack - Self-stacking bars
    ~/workspace/source/VCL/TeeNew/Bar_SelfStack.pas
  • Bar Stack Group - Grouped stacked bars
    ~/workspace/source/VCL/TeeNew/Bar_StackGroup.pas

Multiple Series

  • Bar Side All - Multiple bar series side-by-side
    ~/workspace/source/VCL/TeeNew/Bar_SideAll.pas
  • BarJoin Series - Connected bar series
    ~/workspace/source/VCL/TeeNew/BarJoin_Series.pas

Custom Drawing

Canvas Operations

  • Canvas Custom Shape Picture - Custom shapes with pictures
    ~/workspace/source/VCL/TeeNew/Canvas_CustomShapePicture.pas
  • Canvas Custom Shape Round Size - Custom rounded shapes
    ~/workspace/source/VCL/TeeNew/Canvas_CustomShapeRoundSize.pas
  • Chart Custom Chart Rect - Custom chart rectangle
    ~/workspace/source/VCL/TeeNew/Chart_CustomChartRect.pas

Base Customization

  • Base Custom Pos - Custom positioning
    ~/workspace/source/VCL/TeeNew/Base_CustomPos.pas
  • Custom Series Treat Nulls - Custom null handling
    ~/workspace/source/VCL/TeeNew/CustomSeries_TreatNulls.pas

FMX Intermediate Examples

Animations

FireMonkey charts support smooth animations:
  • Animated Bars - Bar chart animations
    ~/workspace/source/FMX/Demo/Animations/DemoAnimBars.pas
  • Animated Lines - Line chart animations
    ~/workspace/source/FMX/Demo/Animations/DemoAnimLines.pas
  • Animated Pie - Pie chart animations
    ~/workspace/source/FMX/Demo/Animations/DemoAnimPie.pas
  • Animated Points - Point series animations
    ~/workspace/source/FMX/Demo/Animations/DemoAnimPoints.pas

Database Integration

  • Chart As Dataset - Expose chart as dataset
    ~/workspace/source/FMX/Demo/Database/ChartAsDataset.pas
  • Dataset Field - Bind to dataset fields
    ~/workspace/source/FMX/Demo/Database/DatasetField.pas
  • Demo CrossTab - CrossTab data visualization
    ~/workspace/source/FMX/Demo/Database/DemoCrossTab.pas
  • Demo DB - Database-connected charts
    ~/workspace/source/FMX/Demo/Database/DemoDB.pas

Commander Tool

The TeeCommander component provides UI for chart navigation:
  • Commander Custom - Custom commander configuration
    ~/workspace/source/VCL/TeeNew/Commander_Custom.pas
  • Commander Custom Editor - Custom commander editor
    ~/workspace/source/VCL/TeeNew/Commander_CustomEditor.pas

Next Steps

Ready for more advanced topics? Check out:

Build docs developers (and LLMs) love