# Sgcwebsockets HTML Charts

> sgcHTML Charts and Indicators

- Skill: `esegece-com/sgcwebsockets-html-charts` (Agent Skill, multi-file: 41 files)
- Install (CLI): `npx skillmds@latest add esegece-com/sgcwebsockets-html-charts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/esegece-com/sgcwebsockets-html-charts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: esegece-com (https://skillmd.com/u/esegece-com)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/esegece-com/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

| Component | Shows |
| --- | --- |
| `TsgcHTMLComponent_Chart` | The general chart, eight types |
| `TsgcHTMLComponent_CandlestickChart` | OHLC financial series |
| `TsgcHTMLComponent_Gauge` | One value against a range |
| `TsgcHTMLComponent_Sparkline` | A small inline trend |
| `TsgcHTMLComponent_Heatmap` | Density across two dimensions |
| `TsgcHTMLComponent_TreeMap` | Proportion, nested |
| `TsgcHTMLComponent_ProgressBar` | Completion |
| `TsgcHTMLComponent_StatCard` | A headline figure with a label |
| `TsgcHTMLComponent_QRCode` | A QR code |
| `TsgcHTMLComponent_Barcode` | A barcode |

## Quickstart, a chart

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

```pascal
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:

```pascal
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.