• All TMS FNC products
• TMS FlexCel
• TMS VCL UI Pack
• TMS VCL Instrumentation Workshop
• TMS VCL Security System
• TMS VCL Plugin Framework
• TMS VCL Async

TMS VCL UI Pack keeps evolving, release after release, decade after decade. That long-term work shows up where Delphi & C++Builder developers actually notice it: support for new compiler and platform targets, better integration with evolving Windows capabilities, and small but meaningful additions that remove friction from day-to-day UI development.

Highlights in TMS VCL UI Pack 13.6

The most important additions in this release are:

• Support for the Windows on ARM EC platform
• PDF form field generation in TAdvPDFLib
• Color, brush style, and pen style selector support in the parameter controls

Other additions in 13.6 include:

• BeginUpdate/EndUpdate in TAdvOfficePager for faster bulk page creation
• AnimationSteps in TAdvOfficePager
• BookMarkMax in TAdvMemo
• Code folding for non-programming languages in TAdvMemo
• ItemAtXY in TAdvSearchList
• AutoDropDown in TAdvSearchEdit
• BorderColorFocused in Curvy Controls

Native platform progress: Windows on ARM EC support

TMS VCL UI Pack now leverages the Windows on ARM work introduced in Delphi 13.1. Embarcadero added support for building Windows on Arm applications using Arm64EC, which is Microsoft’s interoperability-friendly ARM application model for migrating existing desktop software. The good news for you: with Delphi 13.1, there isn't anything to do other than adding the Arm64EC target in your project and recompile your app for ARM. 

PDF form field generation with TAdvPDFLib

The second major addition in 13.6 is PDF form field generation.

This extends the PDF library beyond static document output. You can now generate interactive PDFs with fillable fields directly from Delphi code.

For developers, this opens up several practical scenarios:

• Generating fillable business forms
• Exporting documents with editable fields
• Pre-filling part of a document while leaving user input areas open
• Building PDF-based workflows without relying on external tools

Instead of generating a PDF that only looks right, you can now generate one that is interactive as well.

The new form field generation supports:

• text edit fields
• memo fields
• password fields
• combo boxes
• list boxes
• check boxes
• grouped radio buttons

Basic workflow

• Create the PDF document
• Draw static labels and layout elements through Graphics
• Add interactive controls through FormFields
• Save the result

Here is a compact example:

procedure TForm1.BtnCreatePdfClick(Sender: TObject);
var
  PDF: TAdvPDFLib;
begin
  PDF := TAdvPDFLib.Create;
  try
    PDF.Header := '';
    PDF.BeginDocument('customer-form.pdf');
    PDF.NewPage;

    PDF.Graphics.DrawText('Name', PointF(30, 30));
    PDF.FormFields.AddEdit('name_field', RectF(100, 28, 260, 44));

    PDF.Graphics.DrawText('Email', PointF(30, 55));
    PDF.FormFields.AddEdit('email_field', RectF(100, 53, 260, 69));

    PDF.Graphics.DrawText('Comments', PointF(30, 80));
    PDF.FormFields.AddMemo('comments_field', RectF(100, 78, 260, 150));

    PDF.EndDocument(True);
  finally
    PDF.Free;
  end;
end;

Here is a slightly richer example with a combo box and a checkbox:

procedure TForm1.BtnCreateSurveyClick(Sender: TObject);
var
  PDF: TAdvPDFLib;
begin
  PDF := TAdvPDFLib.Create;
  try
    PDF.Header := '';
    PDF.BeginDocument('survey.pdf');
    PDF.NewPage;

    PDF.Graphics.DrawText('Priority', PointF(30, 30));
    PDF.FormFields.AddComboBox(
      'priority_field',
      RectF(100, 28, 180, 44),
      ['High', 'Normal', 'Low']
    );

    PDF.Graphics.DrawText('Subscribe', PointF(30, 60));
    PDF.FormFields.AddCheckBox('subscribe_field', RectF(100, 58, 116, 74), false);

    PDF.EndDocument(True);
  finally
    PDF.Free;
  end;
end;

This results in:

Parameter controls: built-in color, brush, and pen style selectors

The third major addition in 13.6 is the extension of the parameter controls (TParamLabel, TParamListBox, TParamCheckListBox, TParamTreeView) with support for:

• Color selection
• Brush style selection
• Pen style selection

This is especially useful when building compact editors for drawing, reporting, diagrams, styling, or annotation features. The parameter editor that is used at design-time but can also be used at runtime now recognizes the corresponding parameter classes:

• COLOR
• BRUSH
• PEN

That means the selector UI is built into the control rather than being something you have to wire up manually.

Faster bulk updates and animation speed control in TAdvOfficePager

If you create large numbers of pages dynamically, wrapping those operations in BeginUpdate/EndUpdate for TAdvOfficePager avoids repeated intermediate updates and speeds up the process.

procedure TForm1.BuildPages;
var
  I: Integer;
begin
  AdvOfficePager1.BeginUpdate;
  try
    for I := 1 to 100 do
      AdvOfficePager1.AddAdvPage.Caption := 'Page ' + IntToStr(I);
  finally
    AdvOfficePager1.EndUpdate;
  end;
end;

This is exactly the kind of small API addition that helps in real applications with dynamic tabbed interfaces.

The new AnimationSteps property gives direct control over animation speed of the page tab underlining moving from active to new activated tab.

procedure TForm1.FormCreate(Sender: TObject);
begin
  AdvOfficePager1.AnimationSteps := 4;
end;

TAdvMemo gets more editor control

Two additions were made to TAdvMemo:

• BookMarkMax is now public
• Code folding was extended to non-programming languages

BookMarkMax

This gives you explicit control over the number of bookmarks supported in the editor.

procedure TForm1.FormCreate(Sender: TObject);
begin
  AdvMemo1.BookMarkMax := 32;
end;

Simple, but useful in editors where bookmark count needs to be limited or standardized. Now you can have more bookmarks than the original 10 bookmark limit.

Code folding for non-programming languages

TAdvMemo is often used for more than source code editing. Many applications use it for:

• Configuration files
• Templates
• Structured text
• DSL-like content
• Markup or script-like data

Extending code folding to non-programming languages makes the control more broadly useful in those scenarios. The key difference between how the TAdvMemoStyler component treats code-folding is that for programming languages versus non-programmaing languages, is that identifiers for code folding in programming languages typically do not contain symbols characters like : , ; , etc.. that delimit code folding section keywords. To create your styler for a non-programming language, just implement an override for the function HasLanguageDelimiters and return false.

TMyCustomStyler = class(TAdvCustomMemoStyler)
protected
  function HasLanguageDelimiters: boolean; override;
end;

Now you can code-fold on a section delimiter "section:idx" for example.

Search controls: a little less friction

Two search-related controls also get focused additions.

ItemAtXY in TAdvSearchList

This simplifies coordinate-based hit testing in the list.

procedure TForm1.AdvSearchList1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
var
  Idx: Integer;
begin
  Idx := AdvSearchList1.ItemAtXY(X, Y);
  if Idx >= 0 then
    AdvSearchList1.ItemIndex := Idx;
end;

This is useful for:

• Custom mouse handling
• Context menus
• Drag and drop
• Item-specific interactions
  
  

AutoDropDown in TAdvSearchEdit

This property controls whether the results list opens automatically or not while typing.

procedure TForm1.FormCreate(Sender: TObject);
begin
  AdvSearchEdit1.AutoDropDown := True;
end;

It is a small change, but it gives you more control over how lookup-style UI behave.

Curvy Controls: BorderColorFocused

Curvy Controls now get a BorderColorFocused property. This applies to controls such as: TCurvyEdit, TCurvyComboBox, TCurvyMemo and other related Curvy input controls. It allows to set a separate border color for when the control is in focused state.

It improves focus visibility in a way that feels familiar to users coming from modern UI systems. In particular, it mimics the clearer focus border coloring behavior commonly seen in macOS, where input focus is visually explicit and easy to track.

Final thoughts

TMS VCL UI Pack 13.6 continues the 3 decades tradition of evolving with Delphi & C++Builder, the Windows platform, the software eco-system and most importantly with the needs & feedback of thousands of software developers building real-world applications!
All this with backwards compatibility at the core of every evolution. We highlighted the most noticeable additions in this new release but of course, the full details on new features, improvements and fixes can be found in the version history.  If you are new to TMS VCL UI Pack, you can discover this amazing collection of over 600 components via the fully functional and not time-limited trial version. If you purchased TMS VCL UI Pack years ago and want to be current again with the latest capabilities, there is a discount upgrade offer ready for you from the "My Products" page after login on our website. 

Intro

Stock data is one of the most demanding chart scenarios: dense OHLC bars, date labels that need rotating, interactive panning across months of history, and overlay series like trend lines and moving averages sitting on top. This post shows how TMS FNC Chart handles all of it with a real NVIDIA price history dataset — loading straight from CSV, switching between OHLC and line views, and adding a trend line and 30-day moving average in a few lines of code.

Watch The Video

Watch the companion walkthrough on YouTube:

Quick Highlights

• LoadFromCSVMultiPointData maps CSV columns to Open, High, Low, and Close in a single call — no manual parsing.

• LoadFromCSVData pulls just the Close column for the line view, and AddTrendLine / AddMovingAverage add overlays over the same data immediately after.

• Horizontal panning and zoom are enabled with three properties, and a point-based crosshair snaps to the nearest bar automatically.

• The BeforeDrawSerieXValue event suppresses out-of-range date labels that appear when the scroll window extends past the data.

Loading OHLC Data from CSV

The CSV has five columns: Date, Open, High, Low, Close. LoadFromCSVMultiPointData takes the file path, a load options object, and then the column index for each OHLC field followed by the label column. Setting CSVFirstLine := cflFirstLineSkip discards the header row automatically.

lo := TTMSFNCChartLoadOptions.Create;
lo.CSVDelimiter := ',';
lo.CSVFirstLine := cflFirstLineSkip;

TMSFNCChart1.LoadFromCSVMultiPointData(STOCKDATAFILE, lo,
  2,   // Open
  3,   // High
  1,   // Low
  4,   // Close
  -1, -1,
  0);  // Label (Date)

TMSFNCChart1.Series[0].ChartType := ctOHLC;

After the load, setting ChartType := ctOHLC is the only change needed to render the bars. The same call works for ctCandleStick if you prefer filled bodies.

Interaction: Panning and Zoom

Six months of daily bars is too much to read at full width. Three properties turn on horizontal-only scaling and panning, and MinX / MaxX set the initial visible window to the full dataset so the scroll range is correct from the start.

TMSFNCChart1.Interaction := True;
TMSFNCChart1.InteractionOptions.ScaleMode := smHorizontal;
TMSFNCChart1.InteractionOptions.Panning   := True;

TMSFNCChart1.Series[0].AutoXRange := arDisabled;
TMSFNCChart1.Series[0].MinX := 0;
TMSFNCChart1.Series[0].MaxX := TMSFNCChart1.Series[0].Points.Count - 1;

A point-based crosshair snaps to the nearest bar on hover, showing the exact OHLC values without the crosshair drifting between bars.

TMSFNCChart1.Crosshair.Visible := True;
TMSFNCChart1.Crosshair.Modes   := [ccmPointBased];

Highlight: smHorizontal locks vertical scale while panning, which is exactly what you want for stock charts — the Y axis stays fixed to the full price range while you scroll through time.

Line View: Trend Line and Moving Average

The second button reloads the same CSV using LoadFromCSVData, pulling only the Close column. AddTrendLine and AddMovingAverage are then called over the full point range and each returns a TTMSFNCChartSerie that can be styled like any other series.

TMSFNCChart1.LoadFromCSVData(STOCKDATAFILE, lo, [4], -1, 0);

TMSFNCChart1.AddTrendLine(0, 0, TMSFNCChart1.Series[0].Points.Count - 1);
TMSFNCChart1.AddMovingAverage(0, 0, TMSFNCChart1.Series[0].Points.Count - 1, 30);

TMSFNCChart1.Series[1].Stroke.Color := gcRed;
TMSFNCChart1.Series[1].Stroke.Width := 3;

TMSFNCChart1.Series[2].Stroke.Color := gcBlue;
TMSFNCChart1.Series[2].Stroke.Width := 3;

The trend line (series index 1) is drawn in red, and the 30-day moving average (series index 2) in blue. Both get AutoXRange := arDisabled and matching MinX / MaxX so they align correctly with the price series during pan and zoom.

Highlight: AddTrendLine and AddMovingAverage append new series to the chart and return them directly. No separate component, no manual calculation — just style the result and move on.

Suppressing Out-of-Range X Labels

When AutoXRange is disabled and the chart draws axis labels beyond the data range, labels with invalid indices appear. The BeforeDrawSerieXValue event catches them before they render.

procedure TForm1.TMSFNCChart1BeforeDrawSerieXValue(Sender: TObject;
  AGraphics: TTMSFNCGraphics; ASerie: TTMSFNCChartSerie;
  APosition: TTMSFNCChartXAxisPosition;
  var ADrawValue: TTMSFNCChartDrawXYValue; var ADefaultDraw: Boolean);
begin
  if ADrawValue.Value < 0 then
    ADefaultDraw := False;

  if ADrawValue.Value >= ASerie.Points.Count then
    ADefaultDraw := False;
end;

Setting ADefaultDraw := False skips the draw for that tick entirely, leaving the axis clean at both ends of the scroll range.

Conclusion

TMS FNC Chart reduces a real-world stock charting scenario to straightforward Delphi code: one call to load OHLC data from CSV, three properties for interactive panning, and two calls to add trend and moving average overlays. The same series model and the same MinX / MaxX scroll pattern apply across both chart types, so switching between the OHLC view and the close-price line view is a matter of reloading the data rather than rebuilding the chart.

Intro

Charts that pull live data from a database are far more useful than charts that are fed hardcoded arrays. With TMS FNC Chart, the TTMSFNCChartDatabaseAdapter bridges your dataset and your chart in just a few steps: point it at a DataSource, mark which field is the X label, configure each series as it arrives, and activate it. From that point, every dataset column becomes a chart series automatically.

Watch The Video

Watch the companion walkthrough on YouTube:

Quick Highlights

• Drop a TTMSFNCChartDatabaseAdapter on the form, assign its Source.DataSource, and set Active := True to have the chart populated automatically from a dataset.

• Use the OnSetFieldValueType event to mark the string field as cvtXLabel, so it drives the X-axis labels instead of being treated as a numeric value.

• Use the OnFieldsToSeries event to configure each series as it is created from a dataset field, keeping series setup in one reusable procedure.

• Connect a TTMSFNCDataGrid to the same DataSource to show the raw data and the chart side by side with no extra code.

The Problem With Manual Point Loading

The previous videos in this series populated the chart by calling AddPoint in a loop. That works well for static or computed data, but it breaks down as soon as the data lives in a database. You would have to iterate the dataset yourself, match fields to series, handle the label column separately, and re-run the whole loop whenever the data changes. The database adapter exists to replace all of that with a declarative connection.

The component model stays the same. There is still a TTMSFNCChart on the form, still a series collection, and still the same per-series properties for chart type, markers, and Y range. The difference is that the adapter creates and fills the series from the dataset fields rather than from code you write manually.

Highlight: The database adapter does not replace the series model. It drives it. Everything you already know about configuring a series still applies, just moved into an event rather than a loop.

Building the Dataset

For this demo, the data is a TClientDataSet built at runtime: a Month string field and three numeric fields, Electronics, Clothing, and Food, each holding 12 monthly revenue values. The same structure would apply to any real dataset coming from a database, a REST API response marshalled into a client dataset, or a query result.

procedure TFormDataBinding.BuildDataSet;
var
  I: Integer;
begin
  ClientDataSet1.FieldDefs.Add('Month', ftString, 20);
  ClientDataSet1.FieldDefs.Add('Electronics', ftFloat);
  ClientDataSet1.FieldDefs.Add('Clothing', ftFloat);
  ClientDataSet1.FieldDefs.Add('Food', ftFloat);
  ClientDataSet1.CreateDataSet;

  for I := 0 to 11 do
  begin
    ClientDataSet1.Append;
    ClientDataSet1.FieldByName('Month').AsString      := MonthNames[I];
    ClientDataSet1.FieldByName('Electronics').AsFloat := ElectronicsData[I];
    ClientDataSet1.FieldByName('Clothing').AsFloat    := ClothingData[I];
    ClientDataSet1.FieldByName('Food').AsFloat        := FoodData[I];
    ClientDataSet1.Post;
  end;

  ClientDataSet1.FieldByName('Month').ReadOnly := True;
  ClientDataSet1.First;
end;

Making the Month field read-only is a small but useful detail. It signals to the grid adapter that the field is a label column and prevents accidental edits to what is essentially a key.

Activating the Adapter

The connection is a two-step process: assign the DataSource and set Active := True. The adapter then reads the fields, creates one series per numeric column, fires OnSetFieldValueType for each field so you can classify it, fires OnFieldsToSeries for each series so you can configure it, and fills the points. Disconnecting is the reverse: set Active := False, clear the DataSource reference, and clear the chart.

procedure TFormDataBinding.BtnConnectClick(Sender: TObject);
begin
  if not TMSFNCChartDatabaseAdapter1.Active then
  begin
    if not ClientDataSet1.Active then
    begin
      BuildDataSet;
      ConfigureChart;
    end;
    TMSFNCChartDatabaseAdapter1.Source.DataSource := DataSource1;
    TMSFNCChartDatabaseAdapter1.Active := True;
    BtnConnect.Text := 'Disconnect';
  end
  else
  begin
    TMSFNCChartDatabaseAdapter1.Active := False;
    TMSFNCChartDatabaseAdapter1.Source.DataSource := nil;
    TMSFNCChart1.Clear;
    ConfigureChart;
    BtnConnect.Text := 'Connect';
  end;
end;

Notice that ConfigureChart runs before activation, not after. The chart shell, title, legend, axis positions, and margins are set up independently of the data. The adapter then fills in the series on top of that already-configured shell.

Classifying Fields With OnSetFieldValueType

The adapter cannot know which field is a label and which fields are numeric values without some guidance. That is what OnSetFieldValueType is for. It fires once per field. For any field whose name matches the label column, set AValueType to cvtXLabel. Every other field defaults to a Y value and becomes a series.

procedure TFormDataBinding.TMSFNCChartDatabaseAdapter1SetFieldValueType(
  Sender: TObject; AFieldName: string; AField: TField;
  var AValueType: TTMSFNCChartPointValueType);
begin
  if AFieldName = 'Month' then
    AValueType := cvtXLabel;
end;

That single line is the only place where the data model is described to the chart. If your dataset has a date field for the X axis instead of a string, the same event applies: match the field name and assign the appropriate value type.

Highlight: OnSetFieldValueType is the one place where data semantics are communicated to the chart. Keep it simple: match the field name and set the type. Everything else follows automatically.

Configuring Each Series With OnFieldsToSeries

Once the adapter knows which fields are Y values, it creates a series for each one and fires OnFieldsToSeries. This is where series-level configuration belongs: chart type, mode, Y range behavior, axis positions, marker visibility, stroke width, and label visibility. A shared ConfigureSerie procedure handles all of that and is called from the event, passing the series and a flag indicating whether it is the first one in the collection.

procedure TFormDataBinding.TMSFNCChartDatabaseAdapter1FieldsToSeries(
  Sender: TObject; AFields: TFields; ASeries: TTMSFNCChartSerie);
begin
  ConfigureSerie(ASeries, ASeries.Index = 0);
end;

The first-series flag matters because only the first series should render the X and Y axis labels. Subsequent series share the same axis but should not repeat the tick marks and titles, otherwise the axes draw on top of each other.

procedure TFormDataBinding.ConfigureSerie(ASerie: TTMSFNCChartSerie;
  AIsFirst: Boolean);
begin
  ASerie.Mode := smStatistical;
  ASerie.AutoXRange := arEnabled;
  ASerie.AutoYRange := arCommonZeroBased;
  ASerie.MaxYOffsetPercentage := 10;
  ASerie.XValues.AutoUnits := False;
  ASerie.XValues.MajorUnit := 1;
  ASerie.XValues.Title.Text := 'Month';
  ASerie.YValues.Title.Text := 'Revenue (K)';
  ASerie.XGrid.Visible := False;
  ASerie.YGrid.Visible := True;
  ASerie.Labels.Visible := False; // 36 labels (12 months x 3 series) overlap

  if AIsFirst then
  begin
    ASerie.XValues.Positions := [xpBottom];
    ASerie.YValues.Positions := [ypLeft];
  end
  else
  begin
    ASerie.XValues.Positions := [];
    ASerie.YValues.Positions := [];
  end;

  case FChartMode of
    cmBar:
    begin
      ASerie.ChartType := ctBar;
      ASerie.Bar.Width := 36;
      ASerie.Bar.Spacing := 10;
      ASerie.Markers.Visible := False;
      ASerie.Stroke.Width := 1;
      ASerie.XValues.Angle := -55;
    end;
    cmLine:
    begin
      ASerie.ChartType := ctXYLine;
      ASerie.Markers.Visible := True;
      ASerie.Markers.Width := 8;
      ASerie.Markers.Height := 8;
      ASerie.Stroke.Width := 3;
      ASerie.XValues.Angle := -45;
    end;
  end;
end;

A few things are worth noting here. arCommonZeroBased keeps all three series on a shared Y scale that starts at zero, which is essential for a fair comparison between categories. smStatistical distributes points as categories rather than as mathematically scaled X coordinates. And Labels.Visible := False is a deliberate choice: with 12 months across 3 series, 36 labels would overlap and make the chart unreadable.

Conclusion

Database binding in TMS FNC Chart follows a clear pattern: configure the chart shell once, let the TTMSFNCChartDatabaseAdapter create and fill the series, use OnSetFieldValueType to mark the label column, and use OnFieldsToSeries to apply per-series styling as each one arrives. After that, switching chart types is a property pass over the existing series, and a side-by-side grid is just a second adapter pointing at the same DataSource. The result is a chart that stays connected to real data with very little glue code between them.

Every project starts with an idea, but turning that idea into a working software solution often takes more time and resources than planned. That’s where our custom consultancy services come in. 

At TMS Software, we collaborate closely with your development team to design and deliver tailor-made solutions that fit your exact requirements. You can ask us to extend one of our existing components or to create a completely new application built specifically for your project.

Why choose TMS custom consultancy?

When you work with TMS Software, you collaborate directly with the engineers behind the frameworks and components you already use. That means you gain:

1. Direct access to deep technical expertise.
   Our engineers know the Delphi and TMS component ecosystem inside out, ensuring new features integrate smoothly and efficiently into your existing projects.
2. Solutions that match your workflow.
   Off-the-shelf tools rarely cover every need. In a consultancy project, you define the requirements, from new features and custom interfaces to specific integrations for your environment.
3. Proven cross-platform experience.
   We’ve built components and applications for Windows, macOS, iOS, Android, Linux, Web, Raspberry Pi, REST APIs, and Excel integration. Our decades of experience ensure your solution performs reliably everywhere.
4. Faster delivery and lower maintenance.
   Instead of dedicating weeks of internal development time, rely on our team to build your feature correctly from the start, saving time and reducing future maintenance.
5. Smooth web integration and backend connectivity.
   From REST and GraphQL APIs to Delphi web client apps and backend data exchange, our team handles complex communication and web connectivity with ease.
   
   

Real-world collaborations

GeoTIFF Support in TMS FNC Maps for Delphi

In one project, we added GeoTIFF layer support for a customer to the TTMSFNCOpenLayers component in TMS FNC Maps.

Thanks to this improvement, Delphi developers can now display and analyze geospatial raster data directly in their applications. This opens the door to using satellite imagery and other map data inside their own projects.

Read more here

Interactive PDF Form Fields in TTMSFNCPDFLib

Another customer worked with us to extend TTMSFNCPDFLib in TMS FNC Core. We added support for interactive PDF form fields, allowing developers to build fillable PDF documents for both Windows and Linux.

With these features, users can type data directly into a PDF, making it easier to create dynamic and interactive document workflows.

Read more here

These collaborations not only achieved our clients’ goals but also enriched the TMS component ecosystem for others. Depending on your agreement, your project can remain proprietary or be shared with the wider Delphi community.

Ready to explore your next custom software project?

Do you have a feature, component, or full application in mind? Our consultancy team bridges the gap between concept and production-ready code. With deep technical insight and a forward-thinking approach, we help you turn your ideas into high-quality, lasting software.

Contact us at sales@tmssoftware.com and let’s create something exceptional together.

What if you could build mapping applications that are completely free from provider limitations? With TMS FNC Maps, you can. This flexible, cross-platform component gives you the freedom to integrate, mix, and switch between the world’s leading mapping services with zero code changes. From Google Maps and Apple Maps to OpenStreetMap, Azure Maps, Here Maps, Leaflet, OpenLayers, TomTom, GeoApify, OpenRouteService, and MapBox, TMS FNC Maps puts all your favorite mapping technologies within reach. 

Intro

Great charts do more than display numbers, they shape how users experience your application. With TMS FNC Chart, you can turn a default chart into a polished, brand-ready visual that feels built for your product, from cleaner legends and sharper axes to custom color schemes, markers, animation, and 3D effects. 

Watch The Video

Watch the companion walkthrough on YouTube:

Quick Highlights

• Use the Object Inspector or the built-in chart editor to restyle the chart shell, legend, title, axes, and series.

• Switch between the built-in Excel-compatible color scheme and your own custom color list through Appearance.ColorScheme.

• Build a mixed chart with an area series and a bar series, then refine it with labels, markers, gradients, and a shared zero-based Y range.

• Add runtime polish with threshold-based point coloring, bitmap markers, animation, 3D, and pie-slice emphasis.

Start in the Designer, Not in Code

A practical way to begin is with a default chart dropped on a form, then work outward from the chart shell before fine-tuning the series. The Object Inspector exposes the expected property groups, such as Appearance, Legend, Title, and the Series collection. Double-clicking the chart opens the design-time editor, which is the faster way to discover the visual model of the component.

That editor groups styling into the same areas you care about when polishing a chart: chart type, appearance, legend, title, X-axis, Y-axis, and series. You can move the legend, restyle its background and font, place the title at the top or bottom, and position axes at the bottom, top, center, left, or right. Duplicate center axes are especially useful when you want a more analytical or dashboard-like look instead of the standard edge-bound layout.

Highlight: The design-time editor is not just a convenience. It is the fastest way to find the right visual direction before you lock anything into source code.

Color Schemes, Backgrounds, and the Chart Shell

A useful distinction is the difference between styling a single series and styling the chart as a system. That starts with the chart shell itself. The chart background can be a plain color, a gradient, or even a texture. Stroke color and opacity are adjusted from the same editor, so the outer frame of the chart can be subtle or intentionally visible depending on the application.

Color handling is also broader than setting one fill color at a time. Use Appearance.ColorScheme to switch between the built-in Excel-compatible palette and a custom color list. That matters because the palette is reused automatically as series are added, and the same list also drives pie colors. In other words, color scheme selection becomes part of the chart configuration, not an afterthought applied series by series.

Highlight: Picking a color scheme first gives every later series a coherent default look, which is far easier to maintain than manually coloring every chart variant.

Once you have a look you like, the chart can also persist that styling as settings. This is especially useful when you want to ship a default theme, reload a saved dashboard layout, or let users tweak the appearance and store it for the next session.

procedure TFormLookAndFeel.SaveAndRestoreChartSettings;
begin
  TMSFNCChart1.SaveSettingsToFile();

  // Later, or in a new session:
  TMSFNCChart1.LoadSettingsFromFile();
end;

Building the Sales Chart Programmatically

Once the chart shell is in place, a mixed chart with an area series for monthly sales and a bar series for profit percentage is a good example of how the styling model becomes practical. The LegendText is set per series, the X-axis is constrained to the 12 months of the year, and the Y-axis is configured as a common zero-based range so both series share a clean baseline.

This setup also shows an important distinction between chart modes. For business data like monthly sales, smStatistical is the right fit because points are distributed as categories rather than as mathematically scaled X coordinates. On top of that, the area series gets a gradient fill and border styling, while the bar series shows labels and markers.

procedure TFormLookAndFeel.BuildSalesChart(const ASales, AProfit: array of Double);
var
  I: Integer;
  SalesSerie: TTMSFNCChartSerie;
  ProfitSerie: TTMSFNCChartSerie;
begin
  TMSFNCChart1.BeginUpdate;
  try
    TMSFNCChart1.Series.Clear;

    SalesSerie := TMSFNCChart1.Series.Add;
    SalesSerie.LegendText := 'Month sales';
    SalesSerie.ChartType := ctArea;
    SalesSerie.Mode := smStatistical;
    SalesSerie.AutoYRange := arCommonZeroBased;

    ProfitSerie := TMSFNCChart1.Series.Add;
    ProfitSerie.LegendText := 'Profit %';
    ProfitSerie.ChartType := ctBar;
    ProfitSerie.Mode := smStatistical;
    ProfitSerie.AutoYRange := arCommonZeroBased;
    ProfitSerie.Labels.Visible := True;
    ProfitSerie.Markers.Visible := True;

    for I := 0 to 11 do
    begin
      SalesSerie.AddPoint(ASales[I], FormatSettings.LongMonthNames[I + 1]);
      ProfitSerie.AddPoint(AProfit[I], FormatSettings.LongMonthNames[I + 1]);
    end;
  finally
    TMSFNCChart1.EndUpdate;
  end;
end;

The exact values can be randomized or loaded from your own dataset, but the structure is what matters: add the series, set the intent of each series, then add point values and labels. That order keeps appearance and data readable in the source.

Axis labels and spacing deserve their own pass as well. When there is not enough room to show labels horizontally, rotating the X-axis values is often enough to keep the chart readable without changing the data.

procedure TFormLookAndFeel.ConfigureMonthLabels;
var
  S: TTMSFNCChartSerie;
  I: Integer;
  Pt: TTMSFNCChartPoint;
begin
  TMSFNCChart1.BeginUpdate;
  try
    TMSFNCChart1.Clear;
    S := TMSFNCChart1.Series.Add;
    S.Mode := smStatistical;
    S.AutoXRange := arEnabled;
    S.XValues.Angle := -90;

    for I := 1 to 12 do
    begin
      Pt := S.Points.Add;
      Pt.XValueText := FormatSettings.LongMonthNames[I];
    end;
  finally
    TMSFNCChart1.EndUpdate;
  end;
end;

Runtime Styling: Markers, Events, Orientation, Animation, and 3D

This is where the component starts to feel less like a static chart and more like a visual system. First, the bar series is upgraded with marker styling, switching from built-in shapes to a bitmap marker loaded from a PNG. That alone makes it clear that markers can carry semantic meaning, not just decoration.

Dynamic customization can then be added through point-level styling: bars above a threshold can be recolored at runtime. This is a strong pattern because it moves the visual logic closer to the data. Instead of hard-coding one static color, the chart responds to business rules as it renders.

procedure TFormLookAndFeel.HighlightStrongMonths(ASerie: TTMSFNCChartSerie);
var
  I: Integer;
begin
  for I := 0 to ASerie.Points.Count - 1 do
    if ASerie.Points[I].YValue > 40 then
      ASerie.Points[I].Color := gcLime;
end;

Bitmap markers are equally straightforward. Instead of relying on a generic glyph, you can turn every point into a small branded icon or a visual cue that matches the meaning of the series.

procedure TFormLookAndFeel.UseBitmapMarkers(ASerie: TTMSFNCChartSerie);
begin
  ASerie.Markers.Visible := True;
  ASerie.Markers.Bitmap.LoadFromFile('dollar.png');
  ASerie.Markers.Width := 32;
  ASerie.Markers.Height := 32;
  ASerie.Markers.Shape := msBitmap;
end;

From there, global presentation controls can further refine the result. The chart background can be changed to a texture, the orientation can flip between vertical and horizontal, animation can make bars grow from zero to their values, and 3D rendering can be toggled on for the series. Animation is especially useful because it makes the loading or refresh of a chart easier to follow.

procedure TFormLookAndFeel.EnableArea3D;
var
  S: TTMSFNCChartSerie;
  I: Integer;
begin
  TMSFNCChart1.BeginUpdate;
  try
    TMSFNCChart1.Clear;
    S := TMSFNCChart1.Series.Add;
    S.ChartType := ctArea;
    S.Mode := smStatistical;
    S.AutoYRange := arEnabledZeroBased;
    S.Enable3D := True;
    S.XGrid.Visible := True;
    S.YGrid.Visible := True;
    for I := 0 to 10 do
      S.AddPoint(RandomRange(25, 75));
  finally
    TMSFNCChart1.EndUpdate;
  end;
end;

Highlight: Mix static styling with event-driven styling. Set the baseline look in properties, then use runtime logic to emphasize the values that matter.

Pie Charts Reuse the Same Appearance Model

Switching from the sales chart to a pie chart uses the same overall approach. The series collection is cleared, a new pie series is added, labels are made visible, and extra top and bottom margin is applied so an exploded slice still fits cleanly within the chart area. The same color-scheme logic used for line, area, and bar charts is reused for the pie colors.

That is an important design detail. Even though the visual language changes completely, the appearance model stays familiar. Labels, margins, colors, animation, and per-point emphasis still behave like part of the same component rather than like a separate API you need to learn from scratch.

procedure TFormLookAndFeel.BuildPieChart;
var
  S: TTMSFNCChartSerie;
begin
  TMSFNCChart1.BeginUpdate;
  try
    TMSFNCChart1.Legend.Visible := False;
    TMSFNCChart1.Series.Clear;

    S := TMSFNCChart1.Series.Add;
    S.ChartType := ctPie;
    S.Legend.Visible := True;
    S.Pie.AutoSize := False;
    S.Pie.Size := 250;
    S.Stroke.Color := gcBlack;
    S.Labels.Visible := True;

    S.AddPoint(Random(100) + 40, gcDarkred, 'Dark Red');
    S.AddPoint(Random(100) + 40, gcSteelblue, 'Steel Blue');
    S.AddPoint(Random(100) + 40, gcYellowgreen, 'Yellow Green');
    S.AddPoint(Random(100) + 40, gcLightseagreen, 'Light Sea Green');
    S.AddPoint(Random(100) + 40, gcOrange, 'Orange');
  finally
    TMSFNCChart1.EndUpdate;
  end;
end;

The Same Ideas Carry Over to WEB Core

The same chart logic also carries over cleanly to a TMS WEB Core application. The point is not that the chart merely compiles for another target, but that the same appearance concepts survive the move: the same mixed area-plus-bar chart, the same color treatment, and the same general configuration flow appear in the browser after Delphi code is transpiled to JavaScript. That cross-framework consistency is one of the strongest arguments for investing a little time in the chart editor and in a clean programmatic setup.

Conclusion

This is less about one special property and more about a repeatable styling workflow for TMS FNC Chart. Start with the design-time editor to discover the right layout, lock in the chart shell with backgrounds, legends, titles, and axes, then refine each series with chart type, labels, markers, and color scheme. Finally, add runtime rules for thresholds, animation, 3D, or pie-slice emphasis. That combination is what turns the default sample chart into something that actually matches the look and feel of your application.

AI coding agents have become a daily tool for many developers. Tools like Anthropic Claude Code, OpenAI Codex, and Cursor can read your codebase, write new features, fix bugs, and refactor code — all from a natural language description of what you want. Delphi developers are using them too, and we at TMS Software see that more and more of our users work with these tools every day.

But there's a recurring problem when you use these agents with specialized libraries. General-purpose AI models are trained on the broad universe of open-source code. They know Java, C#, Python, and JavaScript well. For Delphi, they manage. For TMS-specific APIs — Aurelius entity attributes, XData service definitions, Sparkle middleware — they often guess. And when an AI guesses at a rich, opinionated API, the results are plausible-looking but wrong.

This is why we are releasing an official, curated collection of agent skills for TMS products: the TMS Software Agent Skills repository.

What Are Agent Skills?

An agent skill is a focused instruction package that an AI coding agent loads dynamically when it encounters a task it recognizes. Think of it as giving your agent a reference manual that it reads before writing code — except it only reads the relevant manual for the specific task at hand.

Skills follow the open Agent Skills specification, which means they work across multiple agents: Claude Code, Cursor, Cline, OpenCode, Continue, and others. You install them once and they activate automatically — no prompting, no configuration.

Each skill is a folder with two parts:

• SKILL.md — describes when to activate and what rules to apply beyond what the reference material covers
• references/ — detailed API documentation: attribute signatures, option tables, code examples, and common patterns

When the agent detects that you're working on something the skill covers — say, mapping a Delphi class to a database — it reads the relevant reference material and applies those rules as it generates code.

The TMS Skills Repository

The TMS Software Agent Skills repository currently ships two skills, both focused on TMS Aurelius, our ORM framework for Delphi.

The reference documentation behind these skills is thorough: over 800 lines covering 25+ mapping scenarios for aurelius-mapping, and 640+ lines covering 15+ operational patterns for aurelius-objects. These are the same concepts our documentation covers — distilled into a format that agents can read and apply directly.

Installing TMS Skills

Using the skills CLI (recommended)

The skills CLI auto-detects which agents you have installed and places files in the right location. It requires Node.js to be installed — once you have it, npx is available and no separate installation is needed.

# Install all TMS skills at once
npx skills add tmssoftware/skills

# Install a single skill
npx skills add https://github.com/tmssoftware/skills/tree/main/skills/aurelius-mapping

Manual installation

Clone or download the repository, then copy the skill folder into the directory your agent watches:

For example, to install the aurelius-mapping skill for Claude Code in your project (from the cloned repository root):

xcopy /E /I skills\aurelius-mapping your-project\.claude\skills\aurelius-mapping

Skills placed in a project-level folder activate for that project only. Skills placed in the global folder activate for all your projects.

Skills in Action

Here's what the difference looks like in practice.

Entity Mapping

Suppose you ask your agent: "Create an Aurelius entity for a Customer that belongs to a Country."

Without a skill, a capable model will often produce plausible-looking but incorrect code — wrong attribute names, wrong association syntax, and missing the RegisterEntity call that Aurelius requires at runtime:

// What an agent might generate WITHOUT the aurelius-mapping skill:

[Table('customers')]          // missing [Entity] — Aurelius ignores this class entirely
TCustomer = class
public
  [PrimaryKey]                // wrong — no such attribute; should be [Id(...)]
  Id: Integer;
  [Column('name')]
  Name: string;
  CountryId: Integer;         // wrong — associations must be expressed as object references,
                              // not raw foreign key fields
end;

// Missing initialization section entirely — RegisterEntity never called

With the aurelius-mapping skill loaded, the agent knows the correct attribute names, where to place them, how to express the association, and the initialization section that anchors the class in the Delphi linker:

uses
  Aurelius.Mapping.Attributes;

type
  [Entity]
  [Automapping]
  TCountry = class
  private
    FId: Integer;
    FName: string;
  public
    property Id: Integer read FId;
    property Name: string read FName write FName;
  end;

  [Entity]
  [Automapping]
  TCustomer = class
  private
    FId: Integer;
    FName: string;
    [Association([], CascadeTypeAllButRemove)]
    [JoinColumn('COUNTRY_ID', [])]
    FCountry: TCountry;
  public
    property Id: Integer read FId;
    property Name: string read FName write FName;
    property Country: TCountry read FCountry write FCountry;
  end;

initialization
  RegisterEntity(TCountry);
  RegisterEntity(TCustomer);

The [Automapping] attribute lets Aurelius infer the table name (CUSTOMER), column names (ID, NAME), and the identifier from the FId field — no extra attributes needed for straightforward mappings. The RegisterEntity call in the initialization section prevents the Delphi linker from removing the class in server applications where it may not be directly referenced in code — a silent failure that is very easy to miss.

Saving and Loading Objects

Now suppose you ask: "Save a new Customer and then load it back by ID."

Without the aurelius-objects skill, the agent is likely to miss the AddOwnership call that transfers memory ownership to the manager before the risky Save call. It may also incorrectly set a raw foreign key field instead of assigning the associated object:

// What an agent might generate WITHOUT the aurelius-objects skill:
var
  Customer: TCustomer;
begin
  Customer := TCustomer.Create;
  Customer.Name := 'Acme Corp';
  Customer.CountryId := 42;       // wrong — set the object reference, not a raw FK value
  Manager.Save(Customer);
  // If Save raises an exception, Customer leaks — AddOwnership was never called
end;

With the aurelius-objects skill, the agent generates correct, safe code:

var
  Customer: TCustomer;
  Found: TCustomer;
begin
  Customer := TCustomer.Create;
  Manager.AddOwnership(Customer);  // manager will destroy it even if Save raises
  Customer.Name := 'Acme Corp';
  Customer.Country := Manager.Find<TCountry>(CountryId);  // assign the object, not an ID
  Manager.Save(Customer);          // executes the INSERT immediately

  // Find uses the identity map: same instance returned if already cached
  Found := Manager.Find<TCustomer>(Customer.Id);
  WriteLn(Found.Name);             // 'Acme Corp'
  // Do not free Customer or Found — the manager owns them
end;

The skill teaches the agent that AddOwnership should come before Save so the manager assumes ownership regardless of outcome; that Save itself executes the INSERT immediately (no Flush needed for new objects); and that associations must be expressed as object references — never as raw foreign key values, which would bypass the ORM entirely.

What's Next

Our skills repository is designed to grow. We plan to add skills for more TMS products — XData service definitions, Sparkle middleware, Sphinx authentication flows — as we expand coverage across our library suite.

The skills follow an open specification, and contributions are welcome. If you've worked extensively with a TMS library and want to help encode that knowledge for AI agents, open a pull request on the GitHub repository.

To get started, install the skills for whichever agent you use, and try asking it to create or work with Aurelius entities. The improvement in code quality should be immediate and noticeable.

• TMS Software Agent Skills on GitHub
• TMS Aurelius product page
• Agent Skills specification