Source-linked demos

ChartForgeX demos: charts, maps, and topology

A curated tour of deterministic charts, dashboards, maps, topology, hierarchy, and report-ready visual composition generated by ChartForgeX.

Each demo pairs the rendered result with a practical use case, the capability it proves, and the source and build path needed to reproduce it.

Open ChartForgeX project hub View source repository Browse the complete ChartForgeX catalog

Restaurant operations dashboard with revenue trend, weekly summary, order status, customer distribution, and occupation charts arranged in a dark report grid.

Dashboards

Restaurant operations dashboard

A report-ready operations canvas combining weekly revenue, order status, customer patterns, occupation, and compact KPI summaries.

Use it when: Combine several visual blocks into a single executive or operational report without relying on a browser charting runtime.

  • VisualGrid
  • mixed charts
  • KPI composition
  • SVG and PNG parity
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: DashboardPortfolioExamples.Write(output, pngOutputScale)

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
SaaS dashboard showing monthly recurring revenue, MRR drivers, customer movement, churn, and supporting KPI cards in a dark grid.

Dashboards

SaaS revenue and retention dashboard

Monthly recurring revenue, movement drivers, churn context, and supporting KPI cards composed into one deterministic dashboard.

Use it when: Produce repeatable finance and product reporting for email, documentation, dashboards, and generated reports from the same model.

  • financial reporting
  • small multiples
  • sparklines
  • static export
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: DashboardPortfolioExamples.Write(output, pngOutputScale)

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Dark security control coverage heatmap with domain rows, control columns, colored cells, percentage labels, and a semantic value scale.

Charts

Control coverage matrix

A heatmap that compares security domains across controls with semantic colors, readable labels, and an explicit value scale.

Use it when: Turn a dense assessment matrix into a compact visual that remains readable in a report or exported image.

  • heatmap
  • semantic scale
  • data labels
  • C# sample
Open HTML Download SVG Download PNG View code sample Source
Reproduce this demo

Entry: SaveChart(heatmap, "control-coverage-heatmap-dark")

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Dark radar chart comparing security posture scores across six security dimensions with a filled polygon and labeled axes.

Charts

Security posture radar

A dark-theme radar chart for comparing posture across identity, endpoint, data, network, application, and operational dimensions.

Use it when: Show a multidimensional posture summary when the relationships between dimensions matter more than a ranked table.

  • radar
  • dark theme
  • semantic labels
  • report export
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: SaveChart(radar, "security-posture-radar-dark")

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Light Sankey diagram with colored weighted flows connecting discovery, triage, ownership, remediation, and monitoring stages.

Charts

Finding remediation flow

A Sankey view tracing weighted findings from discovery through triage, ownership, remediation, and monitoring.

Use it when: Explain where work accumulates or drops out across a multi-stage operational process.

  • Sankey
  • weighted flow
  • stage labels
  • static export
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: SaveChart(findingFlow, "finding-flow-sankey-light")

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Light circular policy readiness chart with a large percentage in the center and a labeled progress ring.

Charts

Policy readiness progress

A compact circular progress visual with an explicit percentage, supporting label, and report-friendly light presentation.

Use it when: Place a clear readiness or completion indicator inside a dashboard card, report strip, or status summary.

  • circle progress
  • compact card
  • data label
  • light theme
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: SaveChart(policyReadinessCircle, "policy-readiness-circle-light")

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Light map of Europe with country and city labels, colored revenue markers, and a legend explaining the value scale.

Maps

Europe revenue map

A dotted geographic map that encodes regional revenue with value-colored points, labels, and a report-oriented viewport.

Use it when: Add geographic context to business or operational metrics without loading a browser mapping library.

  • dotted map
  • regional viewport
  • value scale
  • geographic labels
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: CreateEuropeRevenueDottedMap()

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
World topology map with regional infrastructure sites, curved WAN connections, status labels, and an APAC site selected for detail.

Topology

Geographic infrastructure topology

A topology-native geographic layout with projected site markers, curved WAN routes, regional callouts, selection state, and metadata hooks.

Use it when: Explain site connectivity and route health while keeping the output suitable for static reports and interactive HTML hosts.

  • geographic topology
  • WAN routes
  • callouts
  • selection metadata
Download PNG Source
Reproduce this demo

Entry: BuildGeographicTopologyMap()

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release -- --topology-only
Organization hierarchy with a leadership row and multiple team branches using standard, compact, and vertical arrangements without overlapping cards.

Topology

Organization hierarchy with branch policies

An organization chart generated from parent-child member data with standard, compact, and vertical layout policies applied to individual branches.

Use it when: Render dense team or directory hierarchies while choosing the most readable layout for each subtree.

  • organization chart
  • subtree layout policy
  • compact hierarchy
  • deterministic routing
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: BuildTeamHierarchyBuilder()

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release -- --topology-only
Replication mesh showing regional directory sites, bidirectional links, health status, route metrics, and a highlighted scenario path.

Topology

Interactive replication route explorer

A site-to-site replication mesh with selectable scenarios, ordered route steps, offender highlighting, scoped URL state, and host-ready events.

Use it when: Start with the same deterministic topology used for SVG and PNG, then add browser-side exploration for incident review or live directory tooling.

  • interactive HTML
  • scenario playback
  • deep links
  • host events
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: BuildReplicationMeshExplorer()

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release -- --topology-only
Grid of ChartForgeX charts rendered with several themes and font combinations for side-by-side typography and palette comparison.

Visual systems

Theme and typography showcase

A single comparison grid demonstrating theme palettes, font choices, density, contrast, and consistent chart composition.

Use it when: Choose and verify a visual system before applying it across dashboards, reports, documentation, or branded exports.

  • themes
  • typography
  • comparison grid
  • brand consistency
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: CreateThemeShowcaseGrid()

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release
Wide endpoint status strip with computer identity, operating system, health, storage, network, and support information arranged for a Windows desktop background.

Dashboards

PowerBGInfo endpoint snapshot

A wide endpoint-status composition designed for Windows background deployment, combining device identity, health, storage, network, and support context.

Use it when: Use ChartForgeX composition primitives through PowerBGInfo to place support-ready device context directly on managed Windows desktops.

  • PowerBGInfo
  • desktop background
  • endpoint facts
  • wide composition
Open HTML Download SVG Download PNG Source
Reproduce this demo

Entry: SavePowerBgInfoStatsSection(output, outputScale)

dotnet run --project .\ChartForgeX.Examples\ChartForgeX.Examples.csproj -c Release