# Charts · Ranges and finance

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

Source page: https://doc.astrolui.com/chart/examples/ranges

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

## Timeline (Gantt)

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

```razor
@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; }
    }
}
```

## Range area

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

```razor
@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; }
    }
}
```

## Candlesticks

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

```razor
@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; }
    }
}
```

## Box plot

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

```razor
@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; }
    }
}
```