Ranges and finance

Timeline (Gantt), range area, candlesticks and box plot.

Each example is a complete component: copy its code (markup and @code), including the sample data, and replace it with yours.

1. Timeline (Gantt)

AstrolRangeSeries with YMinValue / YMaxValue in Unix milliseconds, horizontal bars and XAxisType.Datetime.

@using AstrolCharts

@* Timeline (Gantt): a bar from YMinValue to YMaxValue per task. Dates go as Unix milliseconds. *@

<AstrolChart TItem="ProjectTask" Title="Project plan" XAxisType="XAxisType.Datetime" Options="options" Height="@(320)">

 <AstrolRangeSeries TItem="ProjectTask"

 Items="tasks"

 Name="Tasks"

 XValue="e => e.Name"

 YMinValue="e => e.Start.ToUnixTimeMilliseconds()"

 YMaxValue="e => e.End.ToUnixTimeMilliseconds()" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<ProjectTask> options = new()

 PlotOptions = new PlotOptions { Bar = new PlotOptionsBar { Horizontal = true, Distributed = true, BorderRadius = 4 } },

 Legend = new Legend { Show = false },

};

 private static readonly DateTimeOffset start = new(2026, 1, 5, 0, 0, 0, TimeSpan.Zero);

 private readonly List<ProjectTask> tasks = new()

 new() { Name = "Analysis", Start = start, End = start.AddDays(10) },

 new() { Name = "Design", Start = start.AddDays(7), End = start.AddDays(21) },

 new() { Name = "Development", Start = start.AddDays(18), End = start.AddDays(50) },

 new() { Name = "Testing", Start = start.AddDays(45), End = start.AddDays(60) },

 new() { Name = "Release", Start = start.AddDays(60), End = start.AddDays(63) },

};

 public class ProjectTask

 public string Name { get; set; } = string.Empty;

 public DateTimeOffset Start { get; set; }

 public DateTimeOffset End { get; set; }

2. Range area

AstrolRangeAreaSeries (band between Bottom and Top) combined with a line.

@using AstrolCharts

@* Band between the minimum (Bottom) and maximum (Top) temperature, with the average as a line. *@

<AstrolChart TItem="Temperature" Title="Temperature range" Options="options" Height="@(320)">

 <AstrolRangeAreaSeries TItem="Temperature"

 Items="temperatures"

 Name="Min - Max"

 XValue="e => e.Month"

 Bottom="e => e.Min"

 Top="e => e.Max" />

 <AstrolPointSeries TItem="Temperature"

 Items="temperatures"

 Name="Average"

 SeriesType="SeriesType.Line"

 XValue="e => e.Month"

 YValue="e => e.Average" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Temperature> options = new()

 Stroke = new Stroke { Curve = Curve.Smooth, Width = new List<double> { 0, 3 } },

 Fill = new Fill { Opacity = new List<double> { 0.25, 1 } },

 Yaxis = new List<YAxis> { new YAxis { Title = new AxisTitle { Text = "°C" } } },

};

 private readonly List<Temperature> temperatures = new()

 new() { Month = "Jan", Min = 2, Max = 11, Average = 6 },

 new() { Month = "Feb", Min = 3, Max = 13, Average = 8 },

 new() { Month = "Mar", Min = 6, Max = 17, Average = 11 },

 new() { Month = "Apr", Min = 8, Max = 20, Average = 14 },

 new() { Month = "May", Min = 12, Max = 25, Average = 18 },

 new() { Month = "Jun", Min = 16, Max = 30, Average = 23 },

};

 public class Temperature

 public string Month { get; set; } = string.Empty;

 public decimal Min { get; set; }

 public decimal Max { get; set; }

 public decimal Average { get; set; }

AstrolCandleSeries with Open, High, Low and Close per date.

@using AstrolCharts

@* Open, high, low and close per day. Green = closed up, red = closed down. *@

<AstrolChart TItem="StockDay" Title="ACME stock" XAxisType="XAxisType.Datetime" Height="@(320)">

 <AstrolCandleSeries TItem="StockDay"

 Items="prices"

 Name="ACME"

 XValue="e => e.Date.ToUnixTimeMilliseconds()"

 Open="e => e.Open"

 High="e => e.High"

 Low="e => e.Low"

 Close="e => e.Close" />

</AstrolChart>

@code {

 private readonly List<StockDay> prices = Generate();

 // Deterministic sample: 20 trading days

 private static List<StockDay> Generate()

 var list = new List<StockDay>();

 var date = new DateTimeOffset(2026, 3, 2, 0, 0, 0, TimeSpan.Zero);

 decimal close = 100;

 for (int i = 0; i < 20; i++)

 var open = close;

 close = open + ((i * 37) % 11 - 5);

 list.Add(new StockDay

 Date = date.AddDays(i),

 Open = open,

 Close = close,

 High = Math.Max(open, close) + (i % 3) + 1,

 Low = Math.Min(open, close) - (i % 4) - 1,

});

 return list;

 public class StockDay

 public DateTimeOffset Date { get; set; }

 public decimal Open { get; set; }

 public decimal High { get; set; }

 public decimal Low { get; set; }

 public decimal Close { get; set; }

AstrolBoxPlotSeries: minimum, quartiles, median and maximum per group.

@using AstrolCharts

@* Distribution per group: minimum, first quartile, median, third quartile and maximum. *@

<AstrolChart TItem="ResponseTime" Title="Response time by service (ms)" Height="@(320)">

 <AstrolBoxPlotSeries TItem="ResponseTime"

 Items="times"

 Name="Response time"

 XValue="e => e.Service"

 Min="e => e.Min"

 Quantile1="e => e.Q1"

 Median="e => e.Median"

 Quantile3="e => e.Q3"

 Max="e => e.Max" />

</AstrolChart>

@code {

 private readonly List<ResponseTime> times = new()

 new() { Service = "Login", Min = 40, Q1 = 60, Median = 75, Q3 = 95, Max = 140 },

 new() { Service = "Search", Min = 80, Q1 = 120, Median = 150, Q3 = 190, Max = 260 },

 new() { Service = "Orders", Min = 55, Q1 = 70, Median = 90, Q3 = 115, Max = 170 },

 new() { Service = "Reports", Min = 200, Q1 = 280, Median = 330, Q3 = 410, Max = 520 },

};

 public class ResponseTime

 public string Service { get; set; } = string.Empty;

 public decimal Min { get; set; }

 public decimal Q1 { get; set; }

 public decimal Median { get; set; }

 public decimal Q3 { get; set; }

 public decimal Max { get; set; }