Sgcwebsockets HTML Charts

sgcHTML Charts and Indicators

Ten widgets for showing numbers visually: charts, gauges, sparklines, heatmaps, treemaps, candlesticks, progress bars, stat cards, QR codes and barcodes.

Read sgcwebsockets-html-core first for the page builder and the edition gate. sgcHTML is All-Access only, needs Indy, and is absent on Android and iOS.

When to use this skill

• Plot a line, bar, pie, doughnut, radar, polar, bubble or scatter chart
• Show a single value as a gauge, a stat card or a progress bar
• Put a sparkline inline, in a table cell or beside a figure
• Show density as a heatmap, or proportion as a treemap
• Plot OHLC financial data as candlesticks
• Render a QR code or a barcode

Components in this skill

Quickstart, a chart

A chart is labels along the axis plus one or more datasets:

FChart := TsgcHTMLComponent_Chart.Create(Self);
FChart.PageBuilder := FPage;
FChart.ChartType := ctLine;

FChart.ClearData;
FChart.AddLabel('Jan');
FChart.AddLabel('Feb');
FChart.AddLabel('Mar');
FChart.AddDataset('Revenue', [1200.0, 1450.0, 1310.0], '#0d6efd', '#0d6efd33', True);
FChart.AddDataset('Costs',   [900.0, 980.0, 1020.0],  '#dc3545', '', False);

TsgcHTMLChartType is (ctLine, ctBar, ctPie, ctDoughnut, ctRadar, ctPolarArea, ctBubble, ctScatter). Changing the type does not change how you supply the data, so you can switch a line chart to bars with one assignment.

AddDataset takes the values as array of Double. Integer literals will not match, so write 1200.0 rather than 1200.

The last two arguments are the border colour and the fill colour, as CSS colour strings, with aFill deciding whether the area under the line is filled. Pass empty strings to let the theme choose.

Straight from a dataset

As elsewhere in the pack, a TDataSet shortcut exists, and it takes the label field plus one or more value fields, giving a dataset per value field:

FChart.LoadFromDataSet(qryMonthly, 'MONTH_NAME', ['REVENUE', 'COSTS']);

The single-value widgets

Gauges, stat cards and progress bars show one number, so they are configured by property rather than built up by method. They take a TsgcHTMLColor, which is the Bootstrap palette: (hcPrimary, hcSecondary, hcSuccess, hcDanger, hcWarning, hcInfo, hcLight, hcDark, hcWhite, hcMuted).

Use the semantic colours for their meaning. hcDanger for a figure that needs attention reads correctly to anyone who has seen a Bootstrap page before, and using it decoratively for a healthy figure actively misleads.

Before you start, ask the developer

Use a structured question tool if your host has one, for example Claude Code's AskUserQuestion. Otherwise ask in chat:

1. One value or a series? A single figure wants a stat card, a gauge or a progress bar. A series wants a chart. Reaching for a chart to show one number is a common overshoot.
2. Where does the data come from? LoadFromDataSet if it is a dataset, AddLabel and AddDataset otherwise.
3. How many points? Charts render client-side, so thousands of points per series will be slow in the browser regardless of how fast the server is.
4. Does it need to update live? A chart built at render time is static. Updating it means re-rendering the fragment, which is what HTMX is for.

Things that catch people out

• AddDataset wants array of Double. An array of integers will not compile.
• ClearData before rebuilding. Calling AddLabel and AddDataset again without it appends to what is already there and the chart doubles up.
• Labels and data must be the same length. A dataset with more values than there are labels renders unpredictably rather than raising.
• The chart draws in the browser, so an empty chart with no error usually means the data never reached the markup, not that the chart is broken. Check the widget's HTML property to see what was actually emitted.
• Every widget still needs PageBuilder assigned.
• QR codes and barcodes encode whatever string you give them, including one built from user input. Validate before encoding if the result will be scanned by something that acts on it.

Routing

• Find a component: reference/components-index.md lists every component, its unit, and its edition, grouped by Reg module.
• Uses clause: add the component's unit: value (shown on its API page) to your uses clause. Nothing compiles without it.
• API detail: reference/api/<Component>.md has the Properties, Events and Methods, each in both Delphi and C++Builder form.
• Option / enum / event types: property and event types link to reference/types/<TypeName>.md, which documents the sub-properties of option classes, the values of enums, and the parameter list of event handlers.
• Examples: examples/index.md is the full demo catalog; examples/<Component>.md is a focused, real usage snippet for the most-used components.
• Concepts: concepts/overview.md (getting started + uses-clause rule) and concepts/editions-and-features.md (which components your edition includes).
• Bundled resources: concepts/resources.md lists the browser-side assets (JavaScript, HTML, CSS) the server components serve or embed, so a browser client works without an external CDN.
• Version history: reference/history.md lists what changed in each sgcWebSockets release.

Editions

Components are gated by edition (Professional, Enterprise, All-Access) or by a feature define. Check the edition column in the components index, or concepts/editions-and-features.md, before relying on a component.

Only public and published members are documented. Method bodies, private fields and protected members are intentionally not included.