Bubble in Blazor Chart component

08 Apr 2021 / 3 minutes to read

Bubble

Visualize data with three numeric parameters. The bubble size depends on third parameter. To render a bubble series, use series Type as Bubble.

bubble.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Bubble">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
        public string Text { get; set; }
    }

    public List<ChartData> SalesReports = new List<ChartData>
{
         new ChartData { X= 92.2, Y= 7.8, Text= "China" },
         new ChartData { X= 74, Y= 6.5, Text= "India" },
         new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" },
         new ChartData { X= 99.4, Y= 2.2, Text= "US" },
         new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" },
         new ChartData { X= 99, Y= 0.7, Text= "Germany" },
         new ChartData { X= 72, Y= 2.0, Text= "Egypt" },
         new ChartData { X= 99.6, Y= 3.4, Text= "Russia" },
         new ChartData { X= 99, Y= 0.2, Text= "Japan" },
         new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" },
         new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" },
         new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" },
         new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" },
         new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" },
         new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" },
         new ChartData { X= 81, Y= 3.5, Text= "Australia" },
         new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" },
         new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" }
    };
}

Note: You can refer to our Blazor Bubble Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Bubble Chart example to knows how to render and configure the bubble type charts.

Bubble Size Mapping

Size property can be used to map the size value specified in data source.

bubble-size.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Size="Size" Type="ChartSeriesType.Bubble">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
        public double Size { get; set; }
        public string Text { get; set; }
    }

    public List<ChartData> SalesReports = new List<ChartData>
{
        new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" },
        new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" },
        new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" },
        new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" },
        new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" },
        new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" },
        new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" },
        new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" },
        new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" },
        new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" },
        new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" },
        new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" },
        new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" },
        new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" },
        new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" },
        new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" },
        new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" },
        new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" }
    };
}

Bubble Size Mapping

Customization

You can use the following properties to customize the bubble series.

Fill – used to change the color of the bubble.
Opacity – used to control the transparency of the chart series.

@using Syncfusion.Blazor.Charts

<SfChart>
<ChartSeriesCollection>
    <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Opacity="0.7" Fill="blue" Size="Size" Type="ChartSeriesType.Bubble">
    </ChartSeries>
</ChartSeriesCollection>
</SfChart>

@code{
public class ChartData
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Size { get; set; }
    public string Text { get; set; }
}

public List<ChartData> SalesReports = new List<ChartData>
{
    new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" },
    new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" },
    new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" },
    new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" },
    new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" },
    new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" },
    new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" },
    new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" },
    new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" },
    new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" },
    new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" },
    new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" },
    new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" },
    new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" },
    new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" },
    new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" },
    new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" },
    new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" }
};
}

Custom Bubble Charts

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

Bubble in Blazor Chart component

Bubble

Bubble Size Mapping

Customization

See Also