From Data to Dashboard in Minutes

One of the most common use cases for HtmlForgeX is building data dashboards — self-contained HTML reports that combine charts, tables, and summary cards into a single file. No web server required.

In this tutorial, we'll build a sales dashboard step by step.

Step 1: Create the Document

var doc = new Document();
doc.Body.Page(page => {
    // We'll add components here
});
doc.Save("dashboard.html");

The Page method creates a full-page layout with the Tabler UI framework. This gives you cards, grids, and responsive layout out of the box.

Step 2: Add Summary Cards

page.Row(row => {
    row.Column(TablerColumnNumber.Four, col => col.MetricCard(card => card
        .Title("Total Revenue")
        .Value("$1,234,567")
        .Change("+12.5%")
        .Subtitle("Compared with the previous period")
        .Icon(TablerIconType.CurrencyDollar)
        .LineTrend(new[] { 82d, 88, 91, 95, 102, 110, 118 })
        .Settings(s => s.Accent(TablerColor.Blue).FillHeight().End())));

    row.Column(TablerColumnNumber.Four, col => col.MetricCard(card => card
        .Title("Orders")
        .Value("8,421")
        .Change("+3.2%")
        .Subtitle("Completed orders this week")
        .Icon(TablerIconType.ShoppingCart)
        .BarTrend(new[] { 21d, 24, 20, 26, 27, 25, 29 })
        .Settings(s => s.Accent(TablerColor.Green).FillHeight().End())));

    row.Column(TablerColumnNumber.Four, col => col.MetricCard(card => card
        .Title("Avg Order Value")
        .Value("$146.60")
        .Change("-1.8%")
        .Subtitle("Average basket size")
        .Icon(TablerIconType.Receipt2)
        .Progress(73, "Target attainment", TablerColor.Orange)
        .Settings(s => s.Accent(TablerColor.Orange).FillHeight().End())));
});

Step 3: Add Charts

page.Row(row => {
    row.Column(TablerColumnNumber.Eight, col => col.Card(card => card.Body(body => body.ApexChart(chart => {
        chart.Title.Text("Monthly Revenue");
        chart.AddLine("Jan", 120)
             .AddLine("Feb", 156)
             .AddLine("Mar", 149)
             .AddLine("Apr", 182)
             .AddLine("May", 198)
             .AddLine("Jun", 224);
        chart.Stroke(s => s.SetCurve(ApexCurve.Smooth).SetWidth(3))
             .DataLabels(d => d.Enable(false))
             .Chart(c => c.SetHeight(350));
    }))));

    row.Column(TablerColumnNumber.Four, col => col.Card(card => card.Body(body => body.ApexChart(chart => {
        chart.Title.Text("Sales by Category");
        chart.AddDonut("Online", 55)
             .AddDonut("Retail", 30)
             .AddDonut("Partners", 15);
        chart.PlotOptions(p => p.PieOptions(pie => pie.DonutSize("65%")))
             .Legend(l => l.ShowLegend(true).Position(ApexPosition.Bottom))
             .DataLabels(d => d.Enable(false))
             .Chart(c => c.SetHeight(350));
    }))));
});

HtmlForgeX uses ApexCharts under the hood, giving you 20+ interactive chart types with tooltips, animations, and responsive sizing.

Step 4: Add a Data Table

page.Table<SalesRecord>(recentOrders, table => {
    table.EnableSearch()
         .EnablePaging(25)
         .EnableExport()
         .EnableColumnVisibility();
});

DataTables provides sorting, filtering, pagination, CSV/Excel export, and column visibility toggles — all from a single method chain.

Step 5: Choose Output Mode

// Self-contained — embed all CSS/JS inline
doc.WithLibraryMode(LibraryMode.Offline);

// Or link to CDN (smaller file, needs internet)
doc.WithLibraryMode(LibraryMode.Online);

// Or extract to local files (best for repeated use)
doc.WithLibraryMode(LibraryMode.OfflineWithFiles);

Result

Open dashboard.html in any browser. You get a fully interactive dashboard with:

  • Responsive card grid with trend indicators
  • Interactive line and donut charts
  • Sortable, searchable, exportable data table
  • Dark/light mode toggle
  • Print-friendly layout

All generated from pure C# — no HTML, CSS, or JavaScript knowledge required.

Check out the full documentation for more components and the showcase for example dashboards.