Bubble Charts

The Kendo UI Bubble Chart HtmlHelper displays data as points with coordinates and sizes defined by the value of their items.

The Bubble Chart HtmlHelper is similar to the Kendo UI Scatter Charts HtmlHelper in which the data points are replaced with bubbles. In this way a Bubble Chart displays three-dimensional data—two values for the coordinates of the items and one value for their size. A Bubble Chart is useful for visualizing different scientific relationships—fr example, economic or social. The X-axis of the Bubble Charts is numerical and does not require items.

Basic Usage

Suitability

The Bubble Charts are well suited for displaying dozens to hundreds of values especially when you wish to visualize size values which differ by several orders of magnitude. As the size value is represented by a circle area, it is a best practice to plot positive values.

Negative Values

By default, negative values are not displayed. However, their area is going to be calculated as if their value was positive. The point label displays their actual value and they will also have a different color. To control this behavior, use the negativeValues.visible and negativeValues.color options that are applicable to each series.

Getting Started

Create the Bubble Chart

The following example visualizes several data points.

Example
@(Html.Kendo().Chart()
    .Name("chart")
    .Series(series =>
    {
        series.Bubble(new dynamic[] {
        new {
          x =  10,
          y = 12000,
          size = 0.1
        }, new {
          x = 24,
          y =  62000,
          size =  0.25
        }
        }).Name("Sales");
    })
)

Figure 1: A sample Bubble Chart

Bubble Chart

See Also

Other articles on Kendo UI Charts and chart types:

In this article
Not finding the help you need? Improve this article