Bubbles Or Weigthed Series
This sample uses C# 13 preview features such as partial properties, it also uses features from the CommunityToolkit.Mvvm package, you can learn more about it here.
This web site wraps every sample using a ContentPage instance, but LiveCharts controls can be used inside any container.
View model
using System;
using LiveChartsCore.Defaults;
namespace ViewModelsSamples.Scatter.Bubbles;
public class ViewModel
{
private static readonly Random s_r = new();
public WeightedPoint[] Values1 { get; set; } = Fetch(1);
public WeightedPoint[] Values2 { get; set; } = Fetch(10);
public WeightedPoint[] Values3 { get; set; } = Fetch(10);
private static WeightedPoint[] Fetch(int scale)
{
var length = 10;
var values = new WeightedPoint[length];
for (var i = 0; i < length; i++)
{
// the WeightedPoint has 3 properties, X, Y and Weight
// we use the X and Y coordinates to position the point in the chart
// the weight will be used by the library to define the size of the points
// where the minimum weight will be the smallest point, and the max weight the biggest
// for any weight between these limits the library
// will interpolate lineally to determine the size of each point
var x = s_r.Next(0, 20);
var y = s_r.Next(0, 20);
var w = s_r.Next(0, 100) * scale;
values[i] = new WeightedPoint(x, y, w);
}
return values;
}
}
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.Scatter.Bubbles.View"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
xmlns:vms="clr-namespace:ViewModelsSamples.Scatter.Bubbles;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlScatterSeries
Values="{Binding Values1}"
GeometrySize="100"
MinGeometrySize="5"/>
<!--
The StackGroup property defines the series that
share the weight scale.
-->
<lvc:XamlScatterSeries
Values="{Binding Values2}"
GeometrySize="100"
MinGeometrySize="5"
StackGroup="1"/>
<lvc:XamlScatterSeries
Values="{Binding Values3}"
GeometrySize="100"
MinGeometrySize="5"
StackGroup="1"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</ContentPage>
