Charts
HtmlForgeX includes ApexCharts, Chart.js, and chart.xkcd.
ApexCharts
ApexCharts is the primary charting library with 20+ chart types:
- Line, Area, Column, Bar
- Pie, Donut, Polar Area, Radar
- Scatter, Bubble, Mixed/Combo
- Heatmap, Treemap, Candlestick
- Box Plot, Range Bar/Area, Funnel
- Radial Bar, Gauge
Chart.js
Chart.js provides additional chart types and plugins:
- Line, Area, Bar, Horizontal Bar
- Pie, Doughnut, Polar Area, Radar
- Scatter, Bubble
- Gauges (via chartjs-gauge-v3)
- Sankey Diagrams (flow visualization)
- Geo Maps (choropleth, bubble maps)
chart.xkcd
chart.xkcd renders sketch-style SVG charts through a typed HtmlForgeX builder. The HtmlForgeX helper applies document theme tokens and re-renders charts when light, dark, variant, or accessibility modes change.
- Line, XY, Bar, Stacked Bar
- Pie/Doughnut, Radar
- Combined Bar/Line
Quick Example
doc.Body.Page(page => {
page.ApexChart(chart => {
chart.Title.Text("Monthly Revenue");
chart.AddLine("Jan", 42000)
.AddLine("Feb", 46500)
.AddLine("Mar", 43800)
.AddLine("Apr", 49200);
chart.Stroke(s => s.SetCurve(ApexCurve.Smooth).SetWidth(3))
.DataLabels(d => d.Enable(false));
});
});
doc.Body.Page(page => {
page.ChartXkcd(chart => {
chart.Line()
.Title("Monthly signal")
.XAxisLabel("Month")
.YAxisLabel("Score")
.AddLabels("Jan", "Feb", "Mar")
.AddDataset("Plan", 30, 45, 52)
.AddDataset("Actual", 22, 48, 40)
.Settings(s => s
.LegendPosition(ChartXkcdLegendPosition.UpLeft)
.End());
});
});