# Charts ยท Basic charts
> Lines, areas, columns, horizontal bars, stacked and mixed charts.
Source page: https://doc.astrolui.com/chart/examples/basic
Each example is a complete component: copy its code (markup and **@code**), including the sample data, and replace it with yours.
## Lines
Two series over the same list with a smooth curve (**Stroke.Curve = Curve.Smooth**) and markers.
```razor
@using AstrolCharts
@code {
private readonly AstrolChartOptions options = new()
{
Stroke = new Stroke { Curve = Curve.Smooth, Width = 3 },
Markers = new Markers { Size = 4 },
};
private readonly List 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; }
}
}
```
## Areas
**SeriesType.Area** with gradient fill (**Fill**) and no data labels.
```razor
@using AstrolCharts
@code {
private readonly AstrolChartOptions 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 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; }
}
}
```
## Columns with aggregation
Several orders per country: **YAggregate** adds them up per X and **OrderByDescending** sorts from highest to lowest. **ShowDataLabels** shows the value.
```razor
@using AstrolCharts
@* Several orders per country: YAggregate groups them by XValue (here, the sum). *@
@code {
private readonly AstrolChartOptions options = new()
{
PlotOptions = new PlotOptions { Bar = new PlotOptionsBar { BorderRadius = 4, ColumnWidth = "60%" } },
};
private readonly List 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; }
}
}
```
## Horizontal bars
**PlotOptions.Bar.Horizontal = true**; with **Distributed = true** each bar gets its own color.
```razor
@using AstrolCharts
@code {
private readonly AstrolChartOptions 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 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; }
}
}
```
## Stacked columns
**Chart.Stacked = true** stacks the series. With **StackType = StackType.Percent100** they are shown as percentages.
```razor
@using AstrolCharts
@code {
private readonly AstrolChartOptions 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 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; }
}
}
```
## Mixed (columns and line)
Each series chooses its **SeriesType**. Two Y axes in **Options.Yaxis**: the second one with **Opposite = true**.
```razor
@using AstrolCharts
@* Each series chooses its own type: columns for units and a line for the average price. *@
@code {
private readonly AstrolChartOptions options = new()
{
Stroke = new Stroke { Width = new List { 0, 4 } }, // no border on bars, 4px line
// Two Y axes: the second one (Opposite) for the price
Yaxis = new List
{
new YAxis { Title = new AxisTitle { Text = "Units" } },
new YAxis { Opposite = true, Title = new AxisTitle { Text = "Price" } },
},
};
private readonly List 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; }
}
}
```