# Charts · Circular charts

> Pie, donut, polar area, radial bars and gauge.

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

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

## Pie

**SeriesType.Pie**: XValue is the name of each slice and YValue its value (they do not need to add up to 100).

```razor
@using AstrolCharts

<AstrolChart TItem="Share" Title="Market share" Height="@(320)">
    <AstrolPointSeries TItem="Share"
                       Items="shares"
                       Name="Share"
                       SeriesType="SeriesType.Pie"
                       XValue="e => e.Browser"
                       YValue="e => e.Percentage" />
</AstrolChart>

@code {
    private readonly List<Share> shares = new()
    {
        new() { Browser = "Chrome", Percentage = 64 },
        new() { Browser = "Safari", Percentage = 19 },
        new() { Browser = "Edge", Percentage = 5 },
        new() { Browser = "Firefox", Percentage = 3 },
        new() { Browser = "Others", Percentage = 9 },
    };

    public class Share
    {
        public string Browser { get; set; } = string.Empty;
        public decimal Percentage { get; set; }
    }
}
```

## Donut

**SeriesType.Donut** with custom colors (**Options.Colors**) and the legend at the bottom.

```razor
@using AstrolCharts

<AstrolChart TItem="Expense" Title="Monthly budget" Options="options" Height="@(320)">
    <AstrolPointSeries TItem="Expense"
                       Items="expenses"
                       Name="Amount"
                       SeriesType="SeriesType.Donut"
                       XValue="e => e.Category"
                       YValue="e => e.Amount" />
</AstrolChart>

@code {
    private readonly AstrolChartOptions<Expense> options = new()
    {
        Legend = new Legend { Position = LegendPosition.Bottom },
        // A custom color per slice (in the same order as the data)
        Colors = new List<string> { "#ffd800", "#007bff", "#12ba38", "#ff6a00", "#b200ff" },
    };

    private readonly List<Expense> expenses = new()
    {
        new() { Category = "Rent", Amount = 900 },
        new() { Category = "Food", Amount = 450 },
        new() { Category = "Transport", Amount = 180 },
        new() { Category = "Leisure", Amount = 220 },
        new() { Category = "Savings", Amount = 300 },
    };

    public class Expense
    {
        public string Category { get; set; } = string.Empty;
        public decimal Amount { get; set; }
    }
}
```

## Polar area

**SeriesType.PolarArea**: the radius of each sector depends on its value.

```razor
@using AstrolCharts

<AstrolChart TItem="Rating" Title="Customer rating" Options="options" Height="@(320)">
    <AstrolPointSeries TItem="Rating"
                       Items="ratings"
                       Name="Score"
                       SeriesType="SeriesType.PolarArea"
                       XValue="e => e.Aspect"
                       YValue="e => e.Score" />
</AstrolChart>

@code {
    private readonly AstrolChartOptions<Rating> options = new()
    {
        Fill = new Fill { Opacity = 0.85 },
        Legend = new Legend { Position = LegendPosition.Bottom },
    };

    private readonly List<Rating> ratings = new()
    {
        new() { Aspect = "Price", Score = 7 },
        new() { Aspect = "Quality", Score = 9 },
        new() { Aspect = "Support", Score = 8 },
        new() { Aspect = "Delivery", Score = 6 },
        new() { Aspect = "Design", Score = 9 },
    };

    public class Rating
    {
        public string Aspect { get; set; } = string.Empty;
        public decimal Score { get; set; }
    }
}
```

## Radial bars

**SeriesType.RadialBar** with values from 0 to 100 and the average in the center (**PlotOptions.RadialBar.DataLabels.Total**).

```razor
@using AstrolCharts

@* Values are percentages (0-100). *@
<AstrolChart TItem="Goal" Title="Annual goals" Options="options" Height="@(330)">
    <AstrolPointSeries TItem="Goal"
                       Items="goals"
                       Name="Progress"
                       SeriesType="SeriesType.RadialBar"
                       XValue="e => e.Name"
                       YValue="e => e.Percentage" />
</AstrolChart>

@code {
    private readonly AstrolChartOptions<Goal> options = new()
    {
        PlotOptions = new PlotOptions
        {
            RadialBar = new PlotOptionsRadialBar
            {
                Hollow = new Hollow { Size = "35%" },
                DataLabels = new RadialBarDataLabels
                {
                    Total = new RadialBarDataLabelsTotal { Show = true, Label = "Average" },
                },
            },
        },
    };

    private readonly List<Goal> goals = new()
    {
        new() { Name = "Sales", Percentage = 82 },
        new() { Name = "Customers", Percentage = 64 },
        new() { Name = "Courses", Percentage = 45 },
    };

    public class Goal
    {
        public string Name { get; set; } = string.Empty;
        public decimal Percentage { get; set; }
    }
}
```

## Gauge (AstrolGauge)

**AstrolGauge** shows a single percentage without defining series. It updates when **Percentage** changes.

```razor
@using AstrolCharts
@using Astrol.Component.Basic.Button
@using Astrol.Entities.Basic.UI

@* AstrolGauge: a single percentage without defining series. *@
<AstrolGauge Title="Disk usage" Label="Used" Percentage="percentage" />

<div style="text-align:center">
    <AstrolButton Icon="astrol-minus-1" Style="AstrolStyle.Blue" Title="-10" OnClick="() => Change(-10)" />
    <AstrolButton Icon="astrol-plus-1" Style="AstrolStyle.Blue" Title="+10" OnClick="() => Change(10)" />
</div>

@code {
    private decimal percentage = 68;

    private void Change(decimal delta) => percentage = Math.Clamp(percentage + delta, 0, 100);
}
```