ASP.NET MVC 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.
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 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.
Easily get started with ASP.NET MVC Bubble Chart using a few simple lines of C# code example as demonstrated below. Also explore our ASP.NET MVC Bubble Chart Example that shows you how to render and configure the chart.
- @Html.EJS().Chart("container").Series(series =>
- {
- series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bubble).XName("x").YName("y1").Size("y2").DataSource(ViewBag.dataSource).Add();
- }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Render();
- public class HomeController : Controller
- {
- public ActionResult Index()
- {
- List<ChartData> chartData = new List<ChartData>
- {
- new ChartData{ x=2000, y1= 0.03, y2= 0.48},
- new ChartData{ x=2001, y1= 0.05, y2= 0.53 },
- new ChartData{ x=2002, y1= 0.06, y2= 0.57 },
- new ChartData{ x=2003, y1= 0.09, y2= 0.61 },
- new ChartData{ x=2004, y1= 0.14, y2= 0.63 },
- new ChartData{ x=2005, y1= 0.20, y2= 0.64 },
- new ChartData{ x=2006, y1= 0.29, y2= 0.66 },
- new ChartData{ x=2007, y1= 0.46, y2= 0.76 },
- new ChartData{ x=2008, y1= 0.64, y2= 0.77 },
- new ChartData{ x=2009, y1= 0.75, y2= 0.55 }
- };
- ViewBag.dataSource = chartData;
- return View();
- }
- }
- public class ChartData
- {
- public double x;
- public double y1;
- public double y2;
- }
