Delphi TChart / TeeChart Example — Line, Bar, Pie Charts and AddXY Usage in VCL

Delphi TChart / TeeChart Example — Line, Bar, Pie Charts and AddXY Usage in VCL

This page provides a Delphi TChart / TeeChart example for VCL applications.
It explains how to draw line charts, bar charts, and pie charts using TChart, TLineSeries, TBarSeries, TPieSeries, and the AddXY method.
It also covers series configuration, axis settings, colors, legends, and other essential chart features.

1. Launching Delphi

Start Delphi and create a new VCL project by selecting “File” ⇒ “New” ⇒ “Windows VCL Application – Delphi”.
Place one TButton and one TChart component on the form.
Save the project and unit files.

Double‑click the dropped Chart1 component to open the Chart Editor dialog. In the left pane, select “Series”, then click the “Add” button on the right.

The dialog shows 13 types of chart series that can be added. In this tutorial, we will add the series programmatically, so click “Cancel”.
TLineSeries (Line), TBarSeries (Bar), THorizBarSeries (Horizontal Bar), TAreaSeries, TPointSeries, TPieSeries,
TFastLineSeries, THorizLineSeries, THorizAreaSeries, TChartShape, TGanttSeries, TArrowSeries, TBubbleSeries

Drawing Two Line Charts in 2D

Double‑click Button1 and write the following source code.

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils,
  System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls,
  Vcl.ExtCtrls,

  // Units required when using TeeChart
  VclTee.TeeGDIPlus, VCLTee.TeEngine,
  VCLTee.TeeProcs, VCLTee.Chart,
  VCLTee.Series,

  VCLTee.TeeShape, // Required when using TChartShape
  VCLTee.GanttCh,  // Required when using TGanttSeries
  VCLTee.ArrowCha, // Required when using TArrowSeries
  VCLTee.BubbleCh; // Required when using TBubbleSeries

  VCLTee.TeeEdiGene, // Required for showing the print preview dialog
  VCLTee.EditChar;   // Required for showing the chart editor dialog

type
  TForm1 = class(TForm)
    Chart1: TChart;
    Button1: TButton;
    Series1: TLineSeries;
    procedure Button1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.Button1Click(Sender: TObject);
var
  lineSeries1: TLineSeries; // Line chart series 1
  lineSeries2: TLineSeries; // Line chart series 2
begin
  //Remove all existing series
  while Chart1.SeriesCount>0 do
    Chart1.RemoveSeries(0);

  // Enable 2D view
  Chart1.View3D := False;
  // Enable 3D view (default)
  // Chart1.View3D := True;


  // Set chart title
  Chart1.Title.Visible := True;
  Chart1.Title.Font.Size := 10;
  Chart1.Title.Font.Color := RGB(0,0,0);
  Chart1.Title.Text.Text := 'Line'#13#10'Chart';

  // Create line chart series 1
  lineSeries1 := TLineSeries.Create(Chart1);
  // Add series 1 to the chart
  Chart1.AddSeries(lineSeries1);
  // Set title of series 1
  Chart1.Series[0].Title := 'Line 1';
  // Line width of series 1
  Chart1.Series[0].Pen.Width := 8;
  // Color of series 1 (auto if not set)
  Chart1.Series[0].Color := RGB(0,255,255);

  // Add points to series 1 (Y [, Label [, Color]])
  Chart1.Series[0].Add(24, 'Label 11');                 // X = 0 automatically
  Chart1.Series[0].Add(30, 'Label 12', RGB(255,0,0));   // X = 1, this point is red
  Chart1.Series[0].Add(60);                             // X = 2, label omitted
  Chart1.Series[0].Add(50);                             // X = 3, label omitted

  // Create line chart series 2
  lineSeries2 := TLineSeries.Create(Chart1);
  // Add series 2 to the chart
  Chart1.AddSeries(lineSeries2);
  // Set title of series 2
  Chart1.Series[1].Title := 'Line 2';
  // Line width of series 2
  Chart1.Series[1].Pen.Width := 8;
  // Color of series 2 (auto if not set)
  Chart1.Series[1].Color := RGB(255,0,255);

  // Add points to series 2 (Y [, Label [, Color]])
  Chart1.Series[1].Add(30, 'Label 21'); // X = 0 automatically
  Chart1.Series[1].Add(40, 'Label 22'); // X = 1
  Chart1.Series[1].Add(50, 'Label 23'); // X = 2, label omitted
end;

Run the application and click Button1. The chart will be displayed as shown below.

Drawing Two Line Charts in 3D with Custom X and Y Axes

Double‑click Button1 and write the following source code.

procedure TForm1.Button1Click(Sender: TObject);
var
  lineSeries1: TLineSeries; // Line chart series 1
  lineSeries2: TLineSeries; // Line chart series 2
begin
  // Remove all existing series
  while Chart1.SeriesCount > 0 do
    Chart1.RemoveSeries(0);

  // Enable 2D view
    // Chart1.View3D := False;
  // Enable 3D view (default)
    Chart1.View3D := True;

  // Depth percentage for 3D mode (0–100)
    Chart1.Chart3DPercent := 50;

  // Set chart title
    Chart1.Title.Visible := True;
    Chart1.Title.Font.Size := 10;
    Chart1.Title.Font.Color := RGB(0,0,0);
    Chart1.Title.Text.Text := 'Line'#13#10'Chart 2';

  // Chart1.LeftAxis   = Left axis
  // Chart1.RightAxis  = Right axis
  // Chart1.BottomAxis = Bottom axis
  // Chart1.TopAxis    = Top axis

  // Show bottom axis
    Chart1.BottomAxis.Visible := True;

  // Set minimum and maximum values of the bottom axis
    // Chart1.BottomAxis.AutomaticMaximum := False;
    // Chart1.BottomAxis.AutomaticMinimum := False;
    Chart1.BottomAxis.SetMinMax(-10, 80);

  // Make bottom axis min/max automatic
    // Chart1.BottomAxis.AutomaticMaximum := True;
    // Chart1.BottomAxis.AutomaticMinimum := True;

  // Bottom axis label styles:
    // Chart1.BottomAxis.LabelStyle := talNone;       // No labels
    // Chart1.BottomAxis.LabelStyle := talAuto;       // Automatic labels
    Chart1.BottomAxis.LabelStyle := talValue;         // Evenly spaced numeric values
    // Chart1.BottomAxis.LabelStyle := talMark;       // Label text or Y value
    // Chart1.BottomAxis.LabelStyle := talPointValue; // X value of each point
    // Chart1.BottomAxis.LabelStyle := talText;       // Label text only

  // Display labels in a single row
    Chart1.BottomAxis.LabelsAlternate := False;
  // Display labels in two alternating rows
    // Chart1.BottomAxis.LabelsAlternate := True;

  // Format for talValue labels (thousands separator, 2 decimals)
    Chart1.BottomAxis.AxisValuesFormat := '#,##0.00';

  // Set major tick interval
    // Chart1.BottomAxis.Increment := 0; // automatic
    Chart1.BottomAxis.Increment := 8;

  // Hide minor ticks
    // Chart1.BottomAxis.MinorTicks.Visible := False;

  // Set min/max for left axis
    // Chart1.LeftAxis.SetMinMax(0, 60);

  // Set left axis title
    Chart1.LeftAxis.Title.Visible := True;
    Chart1.LeftAxis.Title.Text := '(Yen)';

  // Hide legend
    // Chart1.Legend.Visible := False;
  // Place legend at the bottom
    Chart1.Legend.Alignment := laBottom;
  // Show series titles in the legend
    Chart1.Legend.LegendStyle := lsSeries;
  // Show values in the legend
    // Chart1.Legend.LegendStyle := lsValues;

  // Create line chart series 1
    lineSeries1 := TLineSeries.Create(Chart1);
  // Add series 1 to the chart
    Chart1.AddSeries(lineSeries1);
  // Set title of series 1
    Chart1.Series[0].Title := 'Line 1';
  // Line width of series 1
    // Chart1.Series[0].Pen.Width := 8;
  // Color of series 1 (auto if not set)
    Chart1.Series[0].Color := RGB(255,0,0);

  // Add points to series 1 (X, Y [, Label [, Color]])
    Chart1.Series[0].AddXY(12, 35, 'Label 11');
    Chart1.Series[0].AddXY(25, 22);
    Chart1.Series[0].AddXY(46, 30);
    Chart1.Series[0].AddXY(60, 42, 'Label 14');

  // Create line chart series 2
    lineSeries2 := TLineSeries.Create(Chart1);
  // Add series 2 to the chart
    Chart1.AddSeries(lineSeries2);
  // Set title of series 2
    Chart1.Series[1].Title := 'Line 2';
  // Line width of series 2
    // Chart1.Series[1].Pen.Width := 8;
  // Color of series 2 (auto if not set)
    Chart1.Series[1].Color := RGB(255,0,255);

  // Add points to series 2 (X, Y [, Label [, Color]])
    Chart1.Series[1].AddXY(0, 35, 'Label 21');
    Chart1.Series[1].AddXY(12, 20, 'Label 22');
    Chart1.Series[1].AddXY(70, 15);
end;

Run the application and click Button1. The chart will be displayed as shown below.

Drawing a 3D Bar Chart

Double‑click Button1 and write the following source code.

procedure TForm1.Button1Click(Sender: TObject);
var
  BarSeries1: TBarSeries;
begin
  // Remove all existing series
  while Chart1.SeriesCount > 0 do
    Chart1.RemoveSeries(0);

  // Enable 2D view
    // Chart1.View3D := False;
  // Enable 3D view (default)
    Chart1.View3D := True;

  // Disable orthogonal projection
    Chart1.View3DOptions.Orthogonal := False;
  // Set rotation angle to 345 degrees
    Chart1.View3DOptions.Rotation := 345;
  // Set elevation angle to 345 degrees
    Chart1.View3DOptions.Elevation := 345;
  // Set 3D depth percentage (0 = almost 2D)
    Chart1.Chart3DPercent := 40;

  // Set chart title
    Chart1.Title.Visible := True;
    Chart1.Title.Font.Size := 10;
    Chart1.Title.Font.Color := RGB(0,255,255);
    Chart1.Title.Text.Text := 'Bar'#13#10'Chart';

  // Set bottom axis date format
    Chart1.BottomAxis.DateTimeFormat := 'yyyy/mm/dd';

  // Set bottom axis min/max automatically
    // Chart1.BottomAxis.AutomaticMaximum := True;
    // Chart1.BottomAxis.AutomaticMinimum := True;

  // Set bottom axis min/max manually
    Chart1.BottomAxis.SetMinMax(EncodeDate(2020,12,29), EncodeDate(2021,2,3));
  // Equivalent to:
    // Chart1.BottomAxis.Minimum := EncodeDate(2020,12,30);
    // Chart1.BottomAxis.Maximum := EncodeDate(2021,2,2);

  // Rotate bottom axis labels 90 degrees (vertical)
    Chart1.BottomAxis.LabelsAngle := 90;

  // Set major tick interval to 7 days
    Chart1.BottomAxis.Increment := 7;

  // Use X values (dates) as axis labels
    Chart1.BottomAxis.LabelStyle := talPointValue;

  // Enable multi‑line labels if needed
    // Chart1.BottomAxis.LabelsMultiLine := True;

  // Create bar series
    BarSeries1 := TBarSeries.Create(Chart1);
  // Add bar series to chart
    Chart1.AddSeries(BarSeries1);
  // Set bar series title
    Chart1.Series[0].Title := 'Bar 1';
  // Treat X values as DateTime
    Chart1.Series[0].XValues.DateTime := True;

  // Add points
    Chart1.Series[0].AddXY(EncodeDate(2021,1,1), 25);
    Chart1.Series[0].AddXY(EncodeDate(2021,1,12), 14);
    Chart1.Series[0].AddXY(EncodeDate(2021,1,31), 60);
    Chart1.Series[0].AddXY(EncodeDate(2021,1,20), 14);

  // Hide value marks
    Chart1.Series[0].Marks.Visible := False;

  // Save as BMP
    Chart1.SaveToBitmapFile('graph.bmp');

  // Save as JPG (requires jpeg in uses)
  // var bmp: TBitmap; jpg: TJpegImage;
  // bmp := TBitmap.Create;
  // bmp.SetSize(Chart1.Width, Chart1.Height);
  // Chart1.Draw(bmp.Canvas, Rect(0,0,bmp.Width,bmp.Height));
  // jpg := TJpegImage.Create;
  // jpg.Assign(bmp);
  // jpg.CompressionQuality := 50; // JPG compression quality
  // jpg.Compress;                 // Compress JPG
  // jpg.SaveToFile('graph.jpg');  // Save JPG file
  // bmp.Free;
  // jpg.Free;

end;

Run the application and click Button1. The chart will be displayed as shown below.

Drawing a 2D Pie Chart

This example draws a pie chart, saves it as a bitmap file, copies the chart image into a TBitmap, displays the chart editor dialog, and finally shows the print preview dialog.
Double‑click Button1 and write the following source code.

procedure TForm1.Button1Click(Sender: TObject);
var
  pieSeries: TPieSeries;
  bmp: TBitmap;
begin
  // Remove all existing series
  while Chart1.SeriesCount > 0 do
    Chart1.RemoveSeries(0);

  // Enable 2D view
    Chart1.View3D := False;
  // Enable 3D view (default)
    // Chart1.View3D := True;

  // Set chart title
  Chart1.Title.Visible := True;
  Chart1.Title.Font.Size := 10;
  Chart1.Title.Font.Color := RGB(0,0,0);
  Chart1.Title.Text.Text := 'Pie'#13#10'Chart';

  // Create pie chart series
  pieSeries := TPieSeries.Create(Chart1);
  // Add pie series to chart
  Chart1.AddSeries(pieSeries);
  // Set pie series title
  Chart1.Series[0].Title := 'Pie';
  // Set outline width
  Chart1.Series[0].Pen.Width := 1;

  // Add points to the pie series (Y [, Label [, Color]])
  // Add values in ascending order
  Chart1.Series[0].Add(21, 'Label 1');                 // automatic color
  Chart1.Series[0].Add(34, 'Label 2', RGB(255,0,0));   // red slice
  Chart1.Series[0].Add(50);                            // no label, auto color
  Chart1.Series[0].Add(60);                            // no label, auto color

  // Rotate 90 degrees counter‑clockwise (0° is at the right)
  TPieSeries(Chart1.Series[0]).RotationAngle := 90;

  // TChartListOrder.loNone       = no sorting
  // TChartListOrder.loAscending  = ascending, counter‑clockwise
  // TChartListOrder.loDescending = descending, counter‑clockwise
  // Sort by labels in ascending order
  // Chart1.Series[0].SortByLabels(TChartListOrder.loAscending);

  // Show legend
    Chart1.Legend.Visible := True;
  // Place legend on the right
    Chart1.Legend.Alignment := laRight;

  // Automatic legend style
    Chart1.Legend.LegendStyle := lsAuto;

  // Reverse legend order
    Chart1.Legend.Inverted := True;

  // Save chart as a bitmap file
  Chart1.SaveToBitmapFile('pie.bmp');

  // Extract chart image as TBitmap
  bmp := Chart1.TeeCreateBitmap();
  bmp.SaveToFile('pie2.bmp');
  bmp.Free;

  // Show chart editor dialog
  VCLTee.EditChar.EditChart(Self, Chart1);

  // Show print preview dialog
  VCLTee.TeeEdiGene.ChartPreview(Self, Chart1);
end;

end.

Run the application and click Button1. The pie chart will be displayed, followed by the chart editor dialog and the print preview dialog.