ASP.NET Core Bubble Chart - Data Visualization Chart

Overview

ASP.NET Core Bubble chart is like 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 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.

ASP.NET Core Bubble Chart Code Example

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

html
c#
<ejs-chart id="container">
                <e-chart-primaryxaxis valueType="Category">                    
                </e-chart-primaryxaxis>                 
                <e-series-collection>
                   <e-series name="series1" size="yValue1" xName="xValue" yName="yValue" dataSource="ViewBag.dataSource"
                              type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bubble">
                    </e-series>                                     
                </e-series-collection>
 </ejs-chart>
public class HomeController : Controller
{
 public ActionResult Index()
        {  
           List<ChartData> chartData = new List<ChartData>
            {
                 new ChartData { xValue = "2014", yValue = 21, yValue1 = 21 },
                new ChartData { xValue = "2015", yValue = 24, yValue1 = 31},
                new ChartData { xValue = "2016", yValue = 36, yValue1 = 14 },
                new ChartData { xValue = "2017", yValue = 38, yValue1 = 31 },
                new ChartData { xValue = "2018", yValue = 54, yValue1 = 11 },
                new ChartData { xValue = "2019", yValue = 57, yValue1 = 24 },
                new ChartData { xValue = "2020", yValue = 70, yValue1 = 16 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
}
 public class ChartData
        {
            public string xValue;
            public double yValue;
            public double yValue1;       
      }