Bubble chart drawActiveElementsOnTop option
The drawActiveElementsOnTop property controls whether to draw the active bubbles of a dataset over the other bubbles of the same dataset.
charts/bubble
24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Bubble chart dataset properties table
Bubble chart dataset properties: | Name | Type | Scriptable | Indexable | Default | |------|------|:---------:|:---------:|--------| | backgroundColor | Color | Yes | Yes | 'rgba(0, 0, 0, 0.1)' | | borderColor | Color | Yes | Yes | 'rgba(0, 0, 0, 0.1)' | | borderWidth | number | Yes | Yes | 3 | | clip | number or object or false | No | No | undefined | | data | object[] | No | No | required | | drawActiveElementsOnTop | boolean | Yes | Yes | true | | hoverBackgroundColor | Color | Yes | Yes | undefined | | hoverBorderColor | Color | Yes | Yes | undefined | | hoverBorderWidth | number | Yes | Yes | 1 | | hoverRadius | number | Yes | Yes | 4 | | hitRadius | number | Yes | Yes | 1 | | label | string | No | No | undefined | | order | number | No | No | 0 | | pointStyle | pointStyle | Yes | Yes | 'circle' | | rotation | number | Yes | Yes | 0 | | radius | number | Yes | Yes | 3 | All undefined values fallback to the scopes described in option resolution.
Bubble chart label option
The label property is the label for the dataset which appears in the legend and tooltips.
Bubble chart example configuration
const data = { datasets: [{ label: 'First Dataset', data: [{ x: 20, y: 30, r: 15 }, { x: 40, y: 10, r: 10 }], backgroundColor: 'rgb(255, 99, 132)' }] }; const config = { type: 'bubble', data: data, options: {} }; This example shows how to create a bubble chart with two data points, each with x, y, and radius (r) values.
Bubble chart default options override
The default configuration for the bubble chart can be accessed and changed at Chart.overrides.bubble. Changing default values will give all bubble charts created after that point the new defaults.
Bubble chart configuration namespaces
Bubble chart configuration can be set at four namespace levels: data.datasets[index] for options for a specific dataset, options.datasets.bubble for options for all bubble datasets, options.elements.point for options for all point elements, and options for options for the whole chart.
Bubble chart interaction properties
Bubble chart interaction is controlled by the following properties: hitRadius (bubble additional radius for hit detection in pixels), hoverBackgroundColor (bubble background color when hovered), hoverBorderColor (bubble border color when hovered), hoverBorderWidth (bubble border width when hovered in pixels), and hoverRadius (bubble additional radius when hovered in pixels). All these values, if undefined, fallback to the associated elements.point.* options.
Bubble chart styling properties
Bubble chart styling is controlled by the following properties: backgroundColor (bubble background color), borderColor (bubble border color), borderWidth (bubble border width in pixels), pointStyle (bubble shape style), rotation (bubble rotation in degrees), and radius (bubble radius in pixels). All these values, if undefined, fallback to the associated elements.point.* options.
Bubble chart order option
The order property sets the drawing order of the dataset. It also affects the order for tooltip and legend.
Bubble chart purpose and dimensions
A bubble chart displays 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.
Bubble chart dataset data structure
Bubble chart datasets require a data array of points, where each point is an object containing three properties: x (number, X Value), y (number, Y Value), and r (number, bubble radius in pixels, not scaled by the chart). Example: {x: 20, y: 30, r: 15}. The radius property r is the raw radius in pixels of the bubble drawn on the canvas and is not scaled by the chart.
Bubble chart internal data format
The internal data format for bubble charts is {x, y, _custom} where _custom stores the radius value.
Tree-shaking example: Bubble chart components
To enable tree-shaking for a bubble chart, import Chart and specific components: Chart, Colors, BubbleController, CategoryScale, LinearScale, PointElement, and Legend. Then call Chart.register() with these components before creating the chart.
Bubble chart dataset format
Bubble chart datasets require data points with x, y, and r (radius) properties. The x and y coordinates represent two dimensions of data, and the radius represents the third dimension.
Bubble chart minimum components
Bubble chart requires BubbleController, PointElement, and default scales LinearScale for both x and y axes.
Bubble chart randomize action example
To randomize bubble chart data, iterate through all datasets and regenerate the data using Utils.bubbles() with the desired configuration, then call chart.update() to refresh the chart display.
Bubble chart with responsive sizing
Bubble charts support responsive: true option in the config to make them responsive.
Bubble chart configuration type
A bubble chart is created by setting the chart config type to 'bubble'.
Bubble chart basic example setup
A bubble chart requires datasets with label, data, borderColor, and backgroundColor properties. Data is generated using Utils.bubbles() with configuration specifying count (number of bubbles), rmin (minimum radius), rmax (maximum radius), min (minimum value), and max (maximum value). Example: const data = { datasets: [{ label: 'Dataset 1', data: Utils.bubbles({count: 7, rmin: 5, rmax: 15, min: 0, max: 100}), borderColor: Utils.CHART_COLORS.red, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5) }] }
Bubble chart hover state styling
Hover state for bubble points can be customized using hoverBackgroundColor, hoverBorderColor, and hoverBorderWidth options. These can be set as functions to provide dynamic hover styling based on the data context. For example, hoverBorderWidth can be calculated based on the data point's value to scale the border thickness on hover.
Bubble chart data point structure
A bubble chart data point is an object with three properties: x (the x-axis value), y (the y-axis value), and v (the value that determines the bubble radius). For example, {x: 10, y: 20, v: 500} creates a bubble at coordinates (10, 20) with radius based on the value 500.
Bubble point appearance using scriptable options
Bubble point appearance properties including backgroundColor, borderColor, borderWidth, hoverBackgroundColor, hoverBorderColor, and hoverBorderWidth can all be set as scriptable functions. These functions receive the context object and can return values based on properties like context.datasetIndex, context.raw (the data point), or context.chart.
Bubble point radius using scriptable function
The radius of a bubble point can be set with a scriptable function on the point element. The function receives the context object containing chart, datasetIndex, dataIndex, and raw properties. The radius can be calculated based on the chart dimensions and the point's value. Example: radius: function(context) { const size = context.chart.width; const base = Math.abs(context.raw.v) / 1000; return (size / 24) * base; }
Bubble chart dataset configuration with multiple datasets
A bubble chart can have multiple datasets, each with its own data array. Each dataset object contains a data property with an array of bubble point objects. Multiple datasets are rendered as separate series on the same chart.