Syncfusion Feedback


Blazor Components Charts Bubble Chart

Overview

Blazor Bubble chart is like a scatter chart, but allows you to visualize data in 3 dimensions. The size of the bubble is determined based on the third parameter.

Customizing each point in bubble

Appearance of each data point in a Blazor Bubble Chart can be customized using point render event to differentiate each point based on the size.

Data label

Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.

Blazor Bubble Chart Code Example

Easily get started with Blazor Bubble Chart using a few simple lines of C# code, as demonstrated below. Also explore our Blazor Bubble Chart example that shows you how to render and configure the chart.

  1. @using Syncfusion.Blazor.Charts
  2.  
  3. <SfChart>
  4.     <ChartSeriesCollection>
  5.         <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Bubble">
  6.         </ChartSeries>
  7.     </ChartSeriesCollection>
  8. </SfChart>
  9.  
  10. @code{
  11.     public class ChartData
  12.     {
  13.         public double X { get; set; }
  14.         public double Y { get; set; }
  15.         public string Text { get; set; }
  16.     }
  17.  
  18.     public List<ChartData> SalesReports = new List<ChartData>
  19. {
  20.          new ChartData { X= 92.2, Y= 7.8, Text= "China" },
  21.          new ChartData { X= 74, Y= 6.5, Text= "India" },
  22.          new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" },
  23.          new ChartData { X= 99.4, Y= 2.2, Text= "US" },
  24.          new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" },
  25.          new ChartData { X= 99, Y= 0.7, Text= "Germany" },
  26.          new ChartData { X= 72, Y= 2.0, Text= "Egypt" },
  27.          new ChartData { X= 99.6, Y= 3.4, Text= "Russia" },
  28.          new ChartData { X= 99, Y= 0.2, Text= "Japan" },
  29.          new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" },
  30.          new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" },
  31.          new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" },
  32.          new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" },
  33.          new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" },
  34.          new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" },
  35.          new ChartData { X= 81, Y= 3.5, Text= "Australia" },
  36.          new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" },
  37.          new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" }
  38.     };
  39. }

Not sure how to create your first Blazor Bubble Chart? Our documentation can help.

Blazor Components – 100+ UI and DataViz Components

Scroll up icon
Chat with us