Skip to content

Bubble Chart

Reference

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@{
    var data = new List<object> { new { x = 20, y = 30, r = 15 }, new { x = 40, y = 10, r = 10 } };
}

@(Html.Chart("canvasId")
.Data(d => d
    .Datasets(ds => ds
        .Bubble()
        .Label("Bubble Dataset")
        .Data(data)))
.Render())

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
new Chart(document.getElementById('canvasId'),
{
  "data": {
    "datasets": [
      {
        "data": [
          {
            "x": 20,
            "y": 30,
            "r": 15
          },
          {
            "x": 40,
            "y": 10,
            "r": 10
          }
        ],
        "label": "Bubble Dataset",
        "type": "bubble"
      }
    ]
  }
});

Common Dataset Options

These options are common to all datasets.

BackgroundColor

The line fill color. 

.BackgroundColor("green")

BorderColor

The line color. 

.BorderColor("grey")

BorderWidth

The line width (in pixels). 

.BorderWidth(1)

Clip

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. 

.Clip(3)
Is clip enabled? 
.Clip(false)
Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 
.Clip(c => c.Left(5).Top(false).Right(-2).Bottom(0))

Hidden

Configure the visibility of the dataset. Using hidden: true will hide the dataset from being rendered in the Chart. 

.Hidden(true)

HoverBackgroundColor

Background color when hovered. 

.HoverBackgroundColor("blue")

HoverBorderColor

Border color when hovered. 

.HoverBorderColor("grey")

HoverBorderWidth

The line width (in pixels) when hovered. 

.HoverBorderWidth(3)

Label

The label for the dataset which appears in the legend and tooltips. 

.Label("First Bar Dataset")

Parsing

How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally. 

.Parsing(true)
Parsing with key. 
.Parsing("key")
Parsing with x and y axis keys. 
.Parsing("xKey", "yKey")

Bubble Dataset Options

Bubble chart specific dataset options.

DrawActiveElementsOnTop

Draw the active bubbles of a dataset over the other bubbles of the dataset. Default true 

.DrawActiveElementsOnTop(false)

HoverRadius

bubble additional radius when hovered (in pixels). Default 4 

.HoverRadius(3)

HitRadius

bubble additional radius for hit detection (in pixels). Default 1 

.HitRadius(2)

Order

The drawing order of dataset. Also affects order for tooltip and legend. Default 0 

.Order(1)

PointStyle

Is style of the point enabled? Default 'circle' 

.PointStyle(true)
Style of the point. 
.PointStyle(PointStyle.Cross)

Rotation

bubble rotation (in degrees). Default 0 

.Rotation(1)

Radius

bubble radius (in pixels). Default 3 

.Radius(1)