# Charts · Other types

> Radar, scatter, bubbles, heatmap and treemap.

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

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

## Radar

One series per person, created with **@foreach** by filtering the same list.

```razor
@using AstrolCharts

@* One series per person: each one filters the same list. *@
<AstrolChart TItem="SkillScore" Title="Team skills" Height="@(340)">
    @foreach (var person in scores.Select(s => s.Person).Distinct())
    {
        <AstrolPointSeries TItem="SkillScore"
                           Items="scores.Where(s => s.Person == person)"
                           Name="@person"
                           SeriesType="SeriesType.Radar"
                           XValue="e => e.Skill"
                           YValue="e => e.Score" />
    }
</AstrolChart>

@code {
    private readonly List<SkillScore> scores = new()
    {
        new() { Person = "Ana", Skill = "C#", Score = 9 },
        new() { Person = "Ana", Skill = "SQL", Score = 7 },
        new() { Person = "Ana", Skill = "CSS", Score = 5 },
        new() { Person = "Ana", Skill = "Testing", Score = 8 },
        new() { Person = "Ana", Skill = "Design", Score = 4 },
        new() { Person = "Luis", Skill = "C#", Score = 6 },
        new() { Person = "Luis", Skill = "SQL", Score = 9 },
        new() { Person = "Luis", Skill = "CSS", Score = 8 },
        new() { Person = "Luis", Skill = "Testing", Score = 5 },
        new() { Person = "Luis", Skill = "Design", Score = 7 },
    };

    public class SkillScore
    {
        public string Person { get; set; } = string.Empty;
        public string Skill { get; set; } = string.Empty;
        public decimal Score { get; set; }
    }
}
```

## Scatter

**XAxisType.Numeric**: each object is an (x, y) point. One series per group.

```razor
@using AstrolCharts

@* Numeric X axis: each point is an (x, y) pair. *@
<AstrolChart TItem="Measure" Title="Height vs. weight" XAxisType="XAxisType.Numeric" Options="options" Height="@(320)">
    @foreach (var group in measures.Select(m => m.Group).Distinct())
    {
        <AstrolPointSeries TItem="Measure"
                           Items="measures.Where(m => m.Group == group)"
                           Name="@group"
                           SeriesType="SeriesType.Scatter"
                           XValue="e => e.Height"
                           YValue="e => e.Weight" />
    }
</AstrolChart>

@code {
    private readonly AstrolChartOptions<Measure> options = new()
    {
        Xaxis = new XAxis { Title = new AxisTitle { Text = "Height (cm)" }, TickAmount = 6 },
        Yaxis = new List<YAxis> { new YAxis { Title = new AxisTitle { Text = "Weight (kg)" } } },
        Markers = new Markers { Size = 7 },
    };

    private readonly List<Measure> measures = new()
    {
        new() { Group = "Women", Height = 158, Weight = 52 },
        new() { Group = "Women", Height = 162, Weight = 57 },
        new() { Group = "Women", Height = 167, Weight = 60 },
        new() { Group = "Women", Height = 171, Weight = 63 },
        new() { Group = "Women", Height = 164, Weight = 66 },
        new() { Group = "Men", Height = 170, Weight = 68 },
        new() { Group = "Men", Height = 176, Weight = 74 },
        new() { Group = "Men", Height = 181, Weight = 80 },
        new() { Group = "Men", Height = 186, Weight = 85 },
        new() { Group = "Men", Height = 174, Weight = 79 },
    };

    public class Measure
    {
        public string Group { get; set; } = string.Empty;
        public decimal Height { get; set; }
        public decimal Weight { get; set; }
    }
}
```

## Bubbles

**AstrolBubbleSeries**: **YAggregate** gives the height (average price) and **ZAggregate** the size (count).

```razor
@using AstrolCharts

@* X = city, Y = average price, Z (bubble size) = number of sales. *@
<AstrolChart TItem="HouseSale" Title="Housing market" Options="options" Height="@(320)">
    <AstrolBubbleSeries TItem="HouseSale"
                        Items="sales"
                        Name="Sales"
                        XValue="e => e.City"
                        YAggregate="e => e.Average(s => s.Price)"
                        ZAggregate="e => e.Count()" />
</AstrolChart>

@code {
    private readonly AstrolChartOptions<HouseSale> options = new()
    {
        Yaxis = new List<YAxis> { new YAxis { Title = new AxisTitle { Text = "Average price (k)" } } },
        Fill = new Fill { Opacity = 0.7 },
    };

    private readonly List<HouseSale> sales = new()
    {
        new() { City = "Lima", Price = 120 },
        new() { City = "Lima", Price = 140 },
        new() { City = "Lima", Price = 110 },
        new() { City = "Bogota", Price = 95 },
        new() { City = "Bogota", Price = 105 },
        new() { City = "Madrid", Price = 310 },
        new() { City = "Madrid", Price = 280 },
        new() { City = "Madrid", Price = 330 },
        new() { City = "Madrid", Price = 300 },
        new() { City = "Quito", Price = 85 },
    };

    public class HouseSale
    {
        public string City { get; set; } = string.Empty;
        public decimal Price { get; set; }
    }
}
```

## Heatmap

**SeriesType.Heatmap**: each series is a row (day) and X the column (hour); the color shows the value.

```razor
@using AstrolCharts

@* One series (row) per day; X = hour. The color shows the value. *@
<AstrolChart TItem="Activity" Title="Activity by day and hour" Options="options" Height="@(320)">
    @foreach (var day in days)
    {
        <AstrolPointSeries TItem="Activity"
                           Items="activity.Where(a => a.Day == day)"
                           Name="@day"
                           SeriesType="SeriesType.Heatmap"
                           XValue="e => e.Hour"
                           YValue="e => e.Count" />
    }
</AstrolChart>

@code {
    private static readonly string[] days = { "Mon", "Tue", "Wed", "Thu", "Fri" };
    private static readonly string[] hours = { "08h", "10h", "12h", "14h", "16h", "18h" };

    private readonly AstrolChartOptions<Activity> options = new()
    {
        Colors = new List<string> { "#007bff" },
        DataLabels = new DataLabels { Enabled = true },
    };

    // Deterministic sample data
    private readonly List<Activity> activity = days
        .SelectMany((day, d) => hours.Select((hour, h) => new Activity { Day = day, Hour = hour, Count = (d * 7 + h * 13) % 40 + 5 }))
        .ToList();

    public class Activity
    {
        public string Day { get; set; } = string.Empty;
        public string Hour { get; set; } = string.Empty;
        public decimal Count { get; set; }
    }
}
```

## Treemap

**SeriesType.Treemap**: each rectangle's area is proportional to its value.

```razor
@using AstrolCharts

@* Each rectangle's area is proportional to its value. *@
<AstrolChart TItem="Folder" Title="Disk usage by folder" Options="options" Height="@(320)">
    <AstrolPointSeries TItem="Folder"
                       Items="folders"
                       Name="GB"
                       SeriesType="SeriesType.Treemap"
                       XValue="e => e.Name"
                       YValue="e => e.SizeGb" />
</AstrolChart>

@code {
    private readonly AstrolChartOptions<Folder> options = new()
    {
        PlotOptions = new PlotOptions { Treemap = new PlotOptionsTreemap { Distributed = true, EnableShades = false } },
        Legend = new Legend { Show = false },
    };

    private readonly List<Folder> folders = new()
    {
        new() { Name = "Videos", SizeGb = 210 },
        new() { Name = "Photos", SizeGb = 120 },
        new() { Name = "Projects", SizeGb = 95 },
        new() { Name = "Music", SizeGb = 48 },
        new() { Name = "Documents", SizeGb = 22 },
        new() { Name = "Downloads", SizeGb = 64 },
        new() { Name = "Backups", SizeGb = 150 },
    };

    public class Folder
    {
        public string Name { get; set; } = string.Empty;
        public decimal SizeGb { get; set; }
    }
}
```