Transparent Back panel/wall

[TestAlways]

This seems so easy but here are **so** many properties to the chart.

I need the back panel/wall (what ever it is called) to be transparent--but I cannot find the setting.

How do I make a TChart transparent?

Ed Dressel

[Yeray]

Hi Ed,

Take a look at the blog article here. It states:

Over the years, one of the recurring questions with TeeChart Pro VCL/FMX has been how to create a transparent chart. We have an old Delphi demo project which accomplishes this. It consists of an image in a form and a chart over it. The goal is to make the chart transparent so that the image can be seen through the chart background. This is achieved by first making the chart back wall transparent and then, generating a bitmap the size of the chart from the background image at the chart location and drawing it on the TChart canvas. This process produces a chart like that:


Chart with a transparent background in Delphi.

which still is an interactive chart which responds to mouse action: clicks, zoom, panning, etc.

[TestAlways]

Thank you for the quick reply.

This doesn't achieve what I need as I need a transparent back--I cannot get an image/graphic of the background, which the method you provided requires.

Is this achievable?

Ed Dressel

[Yeray]

Hello Ed,

This doesn't achieve what I need as I need a transparent back--I cannot get an image/graphic of the background, which the method you provided requires.

You don't need to have a image in the background as in that example.
Actually, that code is redrawing the form as the chart background so it should work for anything you have in the form between it and the chart.
Ie, if you take that code, remove the image and set the form color to red, it also works:

Code: Select all

procedure TForm1.FormCreate(Sender: TObject);
begin
  Self.Color:=clRed;

  Chart1.Color:=clNone;
  Chart1.Walls.Back.Visible:=False;
  Chart1.AddSeries(TBarSeries).FillSampleValues;

  Chart1.OnBeforeDrawChart:=Chart1BeforeDrawChart;
end;

procedure TForm1.Chart1BeforeDrawChart(Sender: TObject);
begin
  if not Assigned(Back) then
  begin
    Back:=TBitmap.Create;
    Back.Width:=Chart1.Width;
    Back.Height:=Chart1.Height;

    Back.Canvas.CopyRect(Chart1.ClientRect,Canvas,Chart1.BoundsRect);
  end;

  if Chart1.Color=clNone then
     Chart1.Canvas.Draw(0,0,Back);
end;

I've also tried placing a TButton in the middle and I can see it through the chart; it can't be clicked, but it's drawn.

An alternative is by exporting the chart to a PNG with a transparent background, ie:

Code: Select all

uses Series, TeePNG;

procedure TForm1.FormCreate(Sender: TObject);
var tmpStream : TStream;
begin
  Chart1.Gradient.Visible:=false;
  Chart1.Color:=$FF000000;
  Chart1.Walls.Back.Transparent:=true;

  Chart1.AddSeries(TBarSeries).FillSampleValues;

  TeeSaveToPNG(Chart1,'C:\tmp\transp_chart.png');
end;

If you want this png in a form, you can create the chart at runtime, export it to a stream and show that in a TImage. Ie:

Code: Select all

uses Series, TeePNG;

var Chart1: TChart;

procedure TForm1.FormCreate(Sender: TObject);
var tmpStream : TStream;
begin
  Self.Color:=clRed;
  Image1.Transparent:=true;

  Chart1:=TChart.Create(Self);

  Chart1.Gradient.Visible:=false;
  Chart1.Color:=$FF000000;
  Chart1.Walls.Back.Transparent:=true;

  Chart1.AddSeries(TBarSeries).FillSampleValues;

  tmpStream:=TMemoryStream.Create;
  with TPNGExportFormat.Create do
  begin
    Panel:=Chart1;
    SaveToStream(tmpStream);
    Image1.Picture.Graphic:=Bitmap;
  end;
end;