Basic charts

Lines, areas, columns, horizontal bars, stacked and mixed charts.

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

1. Lines

Two series over the same list with a smooth curve (Stroke.Curve = Curve.Smooth) and markers.

@using AstrolCharts

<AstrolChart TItem="MonthlySale" Title="Monthly sales" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="MonthlySale"

 Items="sales"

 Name="Revenue"

 SeriesType="SeriesType.Line"

 XValue="e => e.Month"

 YValue="e => e.Revenue" />

 <AstrolPointSeries TItem="MonthlySale"

 Items="sales"

 Name="Expenses"

 SeriesType="SeriesType.Line"

 XValue="e => e.Month"

 YValue="e => e.Expenses" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<MonthlySale> options = new()

 Stroke = new Stroke { Curve = Curve.Smooth, Width = 3 },

 Markers = new Markers { Size = 4 },

};

 private readonly List<MonthlySale> sales = new()

 new() { Month = "Jan", Revenue = 420, Expenses = 310 },

 new() { Month = "Feb", Revenue = 380, Expenses = 290 },

 new() { Month = "Mar", Revenue = 510, Expenses = 330 },

 new() { Month = "Apr", Revenue = 470, Expenses = 360 },

 new() { Month = "May", Revenue = 620, Expenses = 400 },

 new() { Month = "Jun", Revenue = 580, Expenses = 380 },

};

 public class MonthlySale

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

 public decimal Revenue { get; set; }

 public decimal Expenses { get; set; }

2. Areas

SeriesType.Area with gradient fill (Fill) and no data labels.

@using AstrolCharts

<AstrolChart TItem="Visit" Title="Website visits" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="Visit"

 Items="visits"

 Name="Desktop"

 SeriesType="SeriesType.Area"

 XValue="e => e.Day"

 YValue="e => e.Desktop" />

 <AstrolPointSeries TItem="Visit"

 Items="visits"

 Name="Mobile"

 SeriesType="SeriesType.Area"

 XValue="e => e.Day"

 YValue="e => e.Mobile" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Visit> options = new()

 Stroke = new Stroke { Curve = Curve.Smooth, Width = 2 },

 Fill = new Fill { Type = FillType.Gradient, Opacity = 0.4 },

 DataLabels = new DataLabels { Enabled = false },

};

 private readonly List<Visit> visits = new()

 new() { Day = "Mon", Desktop = 120, Mobile = 210 },

 new() { Day = "Tue", Desktop = 150, Mobile = 260 },

 new() { Day = "Wed", Desktop = 180, Mobile = 240 },

 new() { Day = "Thu", Desktop = 140, Mobile = 300 },

 new() { Day = "Fri", Desktop = 200, Mobile = 350 },

 new() { Day = "Sat", Desktop = 90, Mobile = 410 },

 new() { Day = "Sun", Desktop = 70, Mobile = 380 },

};

 public class Visit

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

 public decimal Desktop { get; set; }

 public decimal Mobile { get; set; }

3. Columns with aggregation

Several orders per country: YAggregate adds them up per X and OrderByDescending sorts from highest to lowest. ShowDataLabels shows the value.

@using AstrolCharts

@* Several orders per country: YAggregate groups them by XValue (here, the sum). *@

<AstrolChart TItem="Order" Title="Sales by country" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="Order"

 Items="orders"

 Name="Gross"

 SeriesType="SeriesType.Bar"

 ShowDataLabels="true"

 XValue="e => e.Country"

 YAggregate="e => e.Sum(o => o.Gross)"

 OrderByDescending="p => p.Y" />

 <AstrolPointSeries TItem="Order"

 Items="orders"

 Name="Net"

 SeriesType="SeriesType.Bar"

 XValue="e => e.Country"

 YAggregate="e => e.Sum(o => o.Net)"

 OrderByDescending="p => p.Y" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Order> options = new()

 PlotOptions = new PlotOptions { Bar = new PlotOptionsBar { BorderRadius = 4, ColumnWidth = "60%" } },

};

 private readonly List<Order> orders = new()

 new() { Country = "Spain", Gross = 120, Net = 100 },

 new() { Country = "Spain", Gross = 80, Net = 70 },

 new() { Country = "Mexico", Gross = 150, Net = 125 },

 new() { Country = "Mexico", Gross = 95, Net = 80 },

 new() { Country = "Peru", Gross = 110, Net = 92 },

 new() { Country = "Chile", Gross = 75, Net = 60 },

 new() { Country = "Chile", Gross = 40, Net = 35 },

};

 public class Order

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

 public decimal Gross { get; set; }

 public decimal Net { get; set; }

4. Horizontal bars

PlotOptions.Bar.Horizontal = true; with Distributed = true each bar gets its own color.

@using AstrolCharts

<AstrolChart TItem="Language" Title="Most used languages" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="Language"

 Items="languages"

 Name="Developers (%)"

 SeriesType="SeriesType.Bar"

 ShowDataLabels="true"

 XValue="e => e.Name"

 YValue="e => e.Percentage"

 OrderByDescending="p => p.Y" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Language> options = new()

 // Horizontal bars, one color per bar

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

 Legend = new Legend { Show = false },

};

 private readonly List<Language> languages = new()

 new() { Name = "JavaScript", Percentage = 62 },

 new() { Name = "Python", Percentage = 51 },

 new() { Name = "C#", Percentage = 27 },

 new() { Name = "Java", Percentage = 30 },

 new() { Name = "Go", Percentage = 13 },

};

 public class Language

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

 public decimal Percentage { get; set; }

5. Stacked columns

Chart.Stacked = true stacks the series. With StackType = StackType.Percent100 they are shown as percentages.

@using AstrolCharts

<AstrolChart TItem="Quarter" Title="Sales by channel" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="Quarter"

 Items="quarters"

 Name="Store"

 SeriesType="SeriesType.Bar"

 XValue="e => e.Name"

 YValue="e => e.Store" />

 <AstrolPointSeries TItem="Quarter"

 Items="quarters"

 Name="Online"

 SeriesType="SeriesType.Bar"

 XValue="e => e.Name"

 YValue="e => e.Online" />

 <AstrolPointSeries TItem="Quarter"

 Items="quarters"

 Name="Wholesale"

 SeriesType="SeriesType.Bar"

 XValue="e => e.Name"

 YValue="e => e.Wholesale" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<Quarter> options = new()

 // Stacked = true piles the series; StackType = StackType.Percent100 shows percentages

 Chart = new Chart { Stacked = true },

 PlotOptions = new PlotOptions { Bar = new PlotOptionsBar { ColumnWidth = "50%" } },

};

 private readonly List<Quarter> quarters = new()

 new() { Name = "Q1", Store = 44, Online = 53, Wholesale = 12 },

 new() { Name = "Q2", Store = 55, Online = 32, Wholesale = 17 },

 new() { Name = "Q3", Store = 41, Online = 33, Wholesale = 11 },

 new() { Name = "Q4", Store = 67, Online = 52, Wholesale = 9 },

};

 public class Quarter

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

 public decimal Store { get; set; }

 public decimal Online { get; set; }

 public decimal Wholesale { get; set; }

6. Mixed (columns and line)

Each series chooses its SeriesType. Two Y axes in Options.Yaxis: the second one with Opposite = true.

@using AstrolCharts

@* Each series chooses its own type: columns for units and a line for the average price. *@

<AstrolChart TItem="ProductSale" Title="Units and average price" Options="options" Height="@(300)">

 <AstrolPointSeries TItem="ProductSale"

 Items="sales"

 Name="Units"

 SeriesType="SeriesType.Bar"

 XValue="e => e.Month"

 YValue="e => e.Units" />

 <AstrolPointSeries TItem="ProductSale"

 Items="sales"

 Name="Average price"

 SeriesType="SeriesType.Line"

 XValue="e => e.Month"

 YValue="e => e.AveragePrice" />

</AstrolChart>

@code {

 private readonly AstrolChartOptions<ProductSale> options = new()

 Stroke = new Stroke { Width = new List<double> { 0, 4 } }, // no border on bars, 4px line

 // Two Y axes: the second one (Opposite) for the price

 Yaxis = new List<YAxis>

 new YAxis { Title = new AxisTitle { Text = "Units" } },

 new YAxis { Opposite = true, Title = new AxisTitle { Text = "Price" } },

},

};

 private readonly List<ProductSale> sales = new()

 new() { Month = "Jan", Units = 230, AveragePrice = 21 },

 new() { Month = "Feb", Units = 310, AveragePrice = 19 },

 new() { Month = "Mar", Units = 280, AveragePrice = 22 },

 new() { Month = "Apr", Units = 420, AveragePrice = 18 },

 new() { Month = "May", Units = 390, AveragePrice = 20 },

 new() { Month = "Jun", Units = 470, AveragePrice = 17 },

};

 public class ProductSale

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

 public decimal Units { get; set; }

 public decimal AveragePrice { get; set; }

More examples

Circular charts Other types Ranges and finance Interaction