BubbleChart

live example

Explore the API in the live example.

api reference

BubbleChart(name[, parent])

The bubble chart widget. Being a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

BottomAxis
ElementTooltip The tooltip contains the X and Y values as well as the bubble size. The labels used in the tooltip are the axis labels for X and Y and 'size' for the size entry. These labels can be used to customize and format the tooltip entries.
Highlight Bubbles can be highlighted by passing their names as specified in the data array.
LeftAxis
Objects
Opacity
XRange
YRange

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

BubbleChart.data(plots)

Set/updates the chart data. Each bubble is a plot group in itself, so all methods that operate on plot groups are applied on the bubble level.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the bubbles to show. Each bubble has two properties: name `string` Category name. value `Object` Category value. The value property is an object with the following structure: x `number` Horizontal coordinate of the bubble. y `number` Vertical coordinate of the bubble. size `number` Bubble size. Note that the bubble is scaled so that its area will be proportional to this value.

Array of objects representing the bubbles to show. Each bubble has two properties:

name: string Category name.
value: Object Category value.

The value property is an object with the following structure:

x: number Horizontal coordinate of the bubble.
y: number Vertical coordinate of the bubble.
size: number Bubble size. Note that the bubble is scaled so that its area will be proportional to this value.

Returns

BubbleChart

Reference to the BubbleChart API.

Examples

const bubbles = dalian.BubbleChart('my-chart')
  .data([{
    name: 'bubble 1',
    value: {
      x: 1,
      y: 3,
      size: 1
    }
  }, {
    name: 'bubble 2',
    value: {
      x: 2,
      y: 2,
      size: 9
    }
  }])
  .render()

BubbleChart.radius([radius])

Sets the maximum radius in pixels for the bubbles.

Parameters

Name	Type	Description
radius	number	optionalMaximum radius in pixels. Default value is `30`.

Returns

Object

Reference to the BubbleChart API.

Examples

// Set the maximum radius to 20px.
const bubbles = dalian.BubbleChart('my-chart')
  .radius(20)
  .render()

// Reset maximum radius to default.
bubbles.radius()
  .render()