Bubble Chart Examples

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.

Basic Usage

Source

<RzChart Configure=@(c => c
    .Data(d => d
        .Datasets(ds => ds
            .Bubble()
            .Label("Bubble Dataset")
            .Data(new object[] {
                new { x = 20, y = 30, r = 15 },
                new { x = 40, y = 10, r = 10 }
            })
            .BackgroundColor("var(--chart-1)")
        )
    )
    .Options(o => o
        .Responsive(true)
        .MaintainAspectRatio(false)
        .Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Bubble Chart")))
    )) />

Common Dataset Options

These options are common to all datasets.

BackgroundColor

The line fill color.

.BackgroundColor("green")

.BackgroundColors("rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)")

BorderColor

The line color.

.BorderColor("grey")

.BorderColors("yellow", "blue")

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")

.HoverBackgroundColors("blue", "green")

HoverBorderColor

Border color when hovered.

.HoverBorderColor("grey")

.HoverBorderColors("grey", "blue")

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")

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' External Link

.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)