Timeline & Range Charts

This section focuses on the advanced Apex chart types that are currently demonstrated in the HtmlForgeX examples repository.

Timeline / Range Notes

• ApexChartType.RangeBar and ApexChartType.RangeArea are available in HtmlForgeX.
• The current example set in the repo shows the same advanced Apex configuration style through candlestick, box plot, treemap, and funnel charts below.
• When adding range/timeline examples, prefer the same page.ApexChart(chart => { ... }) structure used throughout this section.

Candlestick

page.ApexChart(chart => {
    chart.Title.Text("Stock Price");

    chart.AddCandlestick("2024-01-01", 100, 110, 95, 105)
         .AddCandlestick("2024-01-02", 105, 112, 102, 108)
         .AddCandlestick("2024-01-03", 108, 108, 98, 100);

    chart.XAxis(x => x.AxisType(ApexAxisType.Datetime))
         .YAxis(y => y.AxisTitle(t => t.SetText("Price ($)")))
         .Tooltip(t => t.Enable(true));
});

Box Plot

page.ApexChart(chart => {
    chart.Title.Text("Distribution Analysis");

    chart.AddBoxPlot("Team A", 54, 66, 69, 75, 88)
         .AddBoxPlot("Team B", 43, 65, 69, 76, 81)
         .AddBoxPlot("Team C", 31, 39, 45, 51, 59);

    chart.PlotOptions(p => p.BoxPlotOptions(b => b.ColorsUpper("#8BC34A").ColorsLower("#F44336")))
         .Stroke(s => s.SetColors(new[] { "#6c757d" }));
});

Treemap

page.ApexChart(chart => {
    chart.Title.Text("Storage Usage");

    chart.AddTreemap("Documents", 45)
         .AddTreemap("Pictures", 30)
         .AddTreemap("Videos", 15)
         .AddTreemap("Music", 8)
         .AddTreemap("Others", 2);

    chart.Legend(l => l.ShowLegend(true).Position(ApexPosition.Top))
         .DataLabels(d => d.Enable(true));
});

Funnel

page.ApexChart(chart => {
    chart.Title.Text("Sales Funnel");

    chart.AddFunnel("Website Visits", 1000)
         .AddFunnel("Downloads", 700)
         .AddFunnel("Trials", 400)
         .AddFunnel("Purchases", 200);

    chart.PlotOptions(p => p.BarOptions(b => b.HorizontalValue(true).IsFunnel(true)))
         .DataLabels(d => d.Enable(true))
         .Tooltip(t => t.Enable(true));
});