Transparent bands

TeeChart VCL for Borland/CodeGear/Embarcadero RAD Studio, Delphi and C++ Builder.
Post Reply
Anders Balslev
Posts: 4
Joined: Fri Feb 21, 2020 12:00 am

Transparent bands

Post by Anders Balslev » Wed Jun 17, 2020 11:43 am

Hi Steema
Delphi 10.3.3
TeeChart Pro v.2020.29.200113 32 bit VCL

I do not know whether my reply to an old post (2018) have been read.
The title of the post is:
Draw Multiple Transparent Bands with DateTime Bottom Axis

I do have the same problem, and I thereby found the above mentioned post as my solution
However, it's written in Java and I do not know how to translate the code into Delphi
The java code:
<script type="text/javascript">

var Chart1;

function draw() {
Chart1 = new Tee.Chart("canvas1");

Chart1.legend.visible = false;
var line1 = Chart1.addSeries(new Tee.Line([50,30,20,70,10,60,40,50,10,0,100]) );

var oneDay = 86400000, oneHour = 60 * 60 * 1000, today = new Date().getTime(); = [];
for (var i=0; i<line1.count(); i++) { Date(today + i * oneDay));

Chart1.axes.bottom.labels.dateFormat = "dd mmm";
Chart1.axes.bottom.increment = oneDay;

var myFormat1 = new Tee.Format(Chart1);

var myFormat2 = new Tee.Format(Chart1);

line1.beforeDraw=function() {

var x1 = Chart1.axes.bottom.calc([2]),
y1 = Chart1.chartRect.y,
x2 = Chart1.axes.bottom.calc([4]),
y2 = Chart1.chartRect.y + Chart1.chartRect.height;

// X,Y, Width, Height
myFormat1.rectangle(x1,y1, x2-x1, y2-y1);

x1 = Chart1.axes.bottom.calc(today + 7 * oneDay + 5 * oneHour),
y1 = Chart1.chartRect.y,
x2 = Chart1.axes.bottom.calc(today + 8 * oneDay + 2 * oneHour),
y2 = Chart1.chartRect.y + Chart1.chartRect.height;

// X,Y, Width, Height
myFormat2.rectangle(x1,y1, x2-x1, y2-y1);


Do you think it's possible to provide same solution in VCL (Delphi) - or - translate the Java code into Delphi


Anders Balslev

Site Admin
Site Admin
Posts: 986
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona

Re: Transparent bands

Post by Marc » Tue Jun 23, 2020 8:32 am

Hello Anders,

The code is very similar in Delphi. I'm not sure exactly which part you need, but bear in mind that TeeChart VCL/FMX has a Colorband tool that may be used to plot the rectangles. If you wish to do so manually, then use the OnBeforDrawSeries event in a similar way.


Code: Select all

procedure TForm14.Chart1BeforeDrawSeries(Sender: TObject);
var x1,x2,y1,y2 : Integer;
  x1 := Chart1.Axes.Bottom.CalcXPosValue(Series1.XValues[2]);
  y1 := Chart1.chartRect.Top;
  x2 := Chart1.Axes.Bottom.CalcXPosValue(Series1.XValues[4]);
  y2 := Chart1.chartRect.Top + Chart1.chartRect.height;

  Chart1.Canvas.Brush.Color := clYellow;
Please look at the TeeChart code samples for examples of setting the Brush in different ways, etc.

The tutorials include details of variations on how to draw to the Canvas:

Marc Meumann
Steema Support

Post Reply