Bubble in ASP.NET MVC Charts Component
17 Apr 202317 minutes to read
Bubble
To render a bubble series, use series Type as Bubble.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bubble).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Name("Gold").
Size("size").
Width(2).
Add();
})
.PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Title("Olympic Medal Counts - RIO").Render()public ActionResult Index()
{
List<BubbleChartData> chartData = new List<BubbleChartData>
{
new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
};
ViewBag.dataSource = chartData;
return View();
}
public class BubbleChartData
{
public double x;
public double y;
public double size;
public string text;
}Size Mapping
Size property can be used to map the size value specified in data source.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.BUbble).
Marker(ViewBag.Marker).
XName("x").
YName("y").
Size("size").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).
Add();
}).
.PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Title("Olympic Medal Counts - RIO").Render()public ActionResult Index()
{
List<BubbleChartData> chartData = new List<BubbleChartData>
{
new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
};
ViewBag.dataSource = chartData;
return View();
}
public class BubbleChartData
{
public double x;
public double y;
public double size;
public string text;
}Series customization
The following properties can be used to customize the Bubble series.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bubble).
XName("x").
YName("y").
Opacity(0.7).
Fill("blue").
Size("size").
DataSource(ViewBag.dataSource).
Add();
})
.Render()public ActionResult Index()
{
List<BubbleChartData> chartData = new List<BubbleChartData>
{
new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
};
ViewBag.dataSource = chartData;
return View();
}
public class BubbleChartData
{
public double x;
public double y;
public double size;
public string text;
}