Using Themes with TeeChart

Introduction

“Themes” allow changing all visual formatting properties of Charts with a single click or line of code.

The default look of a TeeChart hasn’t been changed for many years. This is on purpose, as it might be annoying to discover existing charts have  completely different colors or font styles just because a new version has been installed.

Default TeeChart Theme

Time goes fast, and what it looked “modern” in the past, might look “old fashioned” in the future.  (If we wait a little bit more, maybe the old look will be modern again. Trends are cycling  :-).

 

Choosing a Theme

The chart editor dialog (in the “Pro” version of TeeChart) includes a Theme tab where you can choose and apply a Theme both at design-time and run-time:

TeeChart Themes Editor

Clicking the bottom-right “Apply” button will change all necessary properties in the edited chart, like fonts, colors, pens and brushes.

Applying Themes by code

Adding the Themes unit to the “uses” clause ( VCLTee.TeeThemes or FMXTee.Themes) enables using the predefined theme classes or creating custom themes.

The above picture shows the “Flat” theme selected in the editor. This is just a small class named “TFlatTheme”, derived from a base TChartTheme class.

Applying the Flat theme at runtime by code:

<code lang="pascal">uses VCLTee.TeeThemes; // FMXTee.Themes <--- FireMonkey

ApplyChartTheme( TFlatTheme, Chart1 );</code>

Available Themes

There are several theme classes included in the Themes unit.

A list of themes can be obtained with the global ChartThemes variable. Each item in the list is a TChartTheme class that can be passed to ApplyChartTheme method.  This is the list displayed at the above Themes editor dialog.

Creating custom Themes

Customizing a theme to apply it to other charts is really easy.
A “theme” is nothing more, and nothing else, than a normal Chart.

That means, any existing chart can be used as a theme for any other chart.

For example, the chart below (“BlueChart”) has been manually customized in a couple of minutes, changing font styles to “Segoe UI”, changing the panel color to white, setting series color and border color to blue, hidding the axes ticks, etc.

TeeChart Custom Theme

This chart can now be used as a new custom Theme, for example to change the look of the above first chart with this simple code:

<code lang="pascal">// Apply ( Destination Chart  <----  Origin Chart )

TThemesList.Apply( Chart1, BlueChart );</code>

Chart1 (the first chart in this post), has now been changed to:

TeeChart_with_custom_Theme

Note in the above chart that when applying a theme, properties that affect the appearance are the only ones modified. This includes font styles, colors and transparencies.  Visibility of elements (chart legend, series marks, 3D etc) are left unchanged.

Data Color Palette

Colors used to fill individual series points (like the colors for the above Bar items) are chosen from a color palette.  This is essentially an “Array of TColor”.

TeeChart includes several predefined color palettes. Each palette is identified by a number.  The list of available palettes is located at the chart editor “General -> Palette” tab:

TeeChart_Color_Palettes

This dialog allows changing the predefined color palette or creating custom palettes. Colors can be clicked to change them, and the buttons allow adding,  removing or reordering colors.

Changing a color palette by code is just changing a chart property:

<code lang="pascal">// Predefined palettes, from 1 to 19

Chart1.ColorPaletteIndex := 5 ;</code>

An array of colors can also be used as a palette:

<code lang="pascal">procedure TForm1.Button4Click(Sender: TObject);
const
  MyColors : Array[0..7] of TColor = (
    $FF0000,
    $0000FF,
    $00FF00,
    $00CCFF,
    $404040,
    $00FFFF,
    $C000FF,
    $FFFFFF );

begin
  TColorPalettes.ApplyPalette( Chart1, MyColors );
  Chart1.Invalidate;
end;</code>

Color palettes and themes are totally independent. Applying a theme to a chart will replace the chart colors with the theme colors (a theme is just a normal chart).

After applying a theme, the color palette can be changed at any time.

Registering Custom Themes

(Advanced)

Custom themes (charts that can be used as themes for other charts) can also be “registered” with the purpose of showing them at the Themes Editor list.

This is done with the help of small class derived from base TChartTheme:

<code lang="pascal">type
  TMyBlueTheme=class(TChartTheme)
  public
    procedure Apply; override;
    function Description:string; override;
  end;

procedure TMyBlueTheme.Apply;
var tmp : TForm1;
begin
  inherited;

  tmp:=TForm1.Create(nil);
  try
    TThemesList.Apply(Self.Chart, tmp.Chart2);
  finally
    tmp.Free;
  end;
end;

function TMyBlueTheme.Description:string;
begin
  result:='My Blue Theme';
end;

// And then calling a method to register the class:

RegisterChartThemes([TMyBlueTheme]);</code>

This is how existing themes are internally registered.

The Apply method can also be used to perform any additional settings or changing any other property.

Download example

Click here to download a small VCL example project showing the above code.

Note: The “Pro” version of TeeChart is required.

3 thoughts to “Using Themes with TeeChart”

  1. I just wanted to send a couple of compliments. First of all, this article is very useful and provides a very valuable look into how themes can be used.

    More specifically, a comment about this: “A ‘theme’ is nothing more, and nothing else, than a normal Chart. That means, any existing chart can be used as a theme for any other chart.”

    What a nice, elegant, brilliant implementation! I’m sure the techies there had a moment of giddyness when that inspiration struck! Nice job! 🙂

  2. Thanks a lot ! But there’s still lots of work to do. The Themes Gallery should be improved and more themes should be available. Also some more specific to mobile / tablet screens, to workaround the limited resolution and device cpu/gpu speed.

  3. Two new features regarding themes have been implemented:

    1) For VCL and Firemonkey, use the current “StyleBook” or system style:

    TSystemTheme.ApplyStyle( Chart1, StyleBook1.Style );

    This will try to match the chart colors to the current Form colors, like for example if you use the Dark style in Android, the chart background will be the same as all other background (almost black) control colors.

    2) Color Schemes

    A new feature in the latest TeeChart Pro version, pass a small array of colors to a method and they will be used globally everywhere for Font color, stroke, brush, gradients, etc.

    Several schemes are provided at the Themes Editor dialog and they can also be used by code, like:

    var Colors : TColorArray;
    Colors:=TeeColorSchemes[ 2 ]; // Use scheme index 2

    TThemesList.ApplyColors(Chart1, Colors, 0); // 0=offset inside the Colors array

Comments are closed.