Styling Options

  • backgroundColor: This option specifies the background color of bubbles in the Bubble Chart.
  • borderColor: This option defines the border color of bubbles in the Bubble Chart.
  • borderWidth: This option sets the border width (in pixels) of bubbles in the Bubble Chart.
  • pointStyle: This option determines the shape style of bubbles in the Bubble Chart.
  • rotation: This option specifies the rotation (in degrees) of bubbles in the Bubble Chart.
  • radius: This option sets the radius (in pixels) of bubbles in the Bubble Chart.

Chart.js Bubble Chart

Chart.js Bubble Chart is used to display the three-dimensional data or 3D data. This chart uses the horizontal and vertical axes to position the bubbles based on the first two dimensions, in which the size of each bubble describes the 3rd dimension.

Syntax:

new Chart($("#ID"), {
type: 'bubble',
data: { ... },
options: { ... }
});

Similar Reads

Dataset Properties

There are some of the dataset properties that are mentioned below:...

General Options

clip: This option is used to control how the chart is clipped relative to the chart area. drawActiveElementsOnTop: This option determines whether the active bubbles of a dataset should be drawn over the other bubbles or not. label: This option is used for assigning the label to the dataset. order: This option is used to set the drawing order of the dataset....

Styling Options

backgroundColor: This option specifies the background color of bubbles in the Bubble Chart. borderColor: This option defines the border color of bubbles in the Bubble Chart. borderWidth: This option sets the border width (in pixels) of bubbles in the Bubble Chart. pointStyle: This option determines the shape style of bubbles in the Bubble Chart. rotation: This option specifies the rotation (in degrees) of bubbles in the Bubble Chart. radius: This option sets the radius (in pixels) of bubbles in the Bubble Chart....

Interaction Options

hitRadius: This option is used to specify the additional radim in pixel format on bubbles. hoverBackgroundColor: This option is used to define the background color of bubbles when hovered in the Bubble Chart. hoverBorderColor: This option is used to set the border color of bubbles when hovered. hoverBorderWidth: This option is used to specify the border width of bubbles when hovered. hoverRadius: This option is used to specify the additional radius for bubbles when hovered....

CDN link

...

Contact Us