mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
133 lines
4.7 KiB
Markdown
133 lines
4.7 KiB
Markdown
# Bubble Chart
|
|
|
|
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.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const data = {
|
|
datasets: [{
|
|
label: 'First Dataset',
|
|
data: [{
|
|
x: 20,
|
|
y: 30,
|
|
r: 15
|
|
}, {
|
|
x: 40,
|
|
y: 10,
|
|
r: 10
|
|
}],
|
|
backgroundColor: 'rgb(255, 99, 132)'
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'bubble',
|
|
data: data,
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
## Example Usage
|
|
|
|
```javascript
|
|
// For a bubble chart
|
|
var myBubbleChart = new Chart(ctx, {
|
|
type: 'bubble',
|
|
data: data,
|
|
options: options
|
|
});
|
|
```
|
|
|
|
## Dataset Properties
|
|
|
|
The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.
|
|
|
|
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
|
|
| ---- | ---- | :----: | :----: | ----
|
|
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
|
|
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
|
|
| [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
|
|
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
|
|
| [`data`](#data-structure) | `object[]` | - | - | **required**
|
|
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
|
|
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
|
|
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
|
|
| [`hoverRadius`](#interactions) | `number` | Yes | Yes | `4`
|
|
| [`hitRadius`](#interactions) | `number` | Yes | Yes | `1`
|
|
| [`label`](#general) | `string` | - | - | `undefined`
|
|
| [`order`](#general) | `number` | - | - | `0`
|
|
| [`pointStyle`](#styling) | `string` | Yes | Yes | `'circle'`
|
|
| [`rotation`](#styling) | `number` | Yes | Yes | `0`
|
|
| [`radius`](#styling) | `number` | Yes | Yes | `3`
|
|
|
|
### General
|
|
|
|
| Name | Description
|
|
| ---- | ----
|
|
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
|
|
| `label` | The label for the dataset which appears in the legend and tooltips.
|
|
| `order` | The drawing order of dataset. Also affects order for tooltip and legend.
|
|
|
|
### Styling
|
|
|
|
The style of each bubble can be controlled with the following properties:
|
|
|
|
| Name | Description
|
|
| ---- | ----
|
|
| `backgroundColor` | bubble background color.
|
|
| `borderColor` | bubble border color.
|
|
| `borderWidth` | bubble border width (in pixels).
|
|
| `pointStyle` | bubble [shape style](../configuration/elements#point-styles).
|
|
| `rotation` | bubble rotation (in degrees).
|
|
| `radius` | bubble radius (in pixels).
|
|
|
|
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
|
|
|
|
### Interactions
|
|
|
|
The interaction with each bubble can be controlled with the following properties:
|
|
|
|
| Name | Description
|
|
| ---- | -----------
|
|
| `hoverBackgroundColor` | bubble background color when hovered.
|
|
| `hoverBorderColor` | bubble border color when hovered.
|
|
| `hoverBorderWidth` | bubble border width when hovered (in pixels).
|
|
| `hoverRadius` | bubble **additional** radius when hovered (in pixels).
|
|
| `hitRadius` | bubble **additional** radius for hit detection (in pixels).
|
|
|
|
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
|
|
|
|
## Default Options
|
|
|
|
We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at `Chart.overrides.bubble`.
|
|
|
|
## Data Structure
|
|
|
|
Bubble chart datasets need to contain a `data` array of points, each point represented by an object containing the following properties:
|
|
|
|
```javascript
|
|
{
|
|
// X Value
|
|
x: number,
|
|
|
|
// Y Value
|
|
y: number,
|
|
|
|
// Bubble radius in pixels (not scaled).
|
|
r: number
|
|
}
|
|
```
|
|
|
|
**Important:** the radius property, `r` is **not** scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas.
|
|
|
|
## Internal data format
|
|
|
|
`{x, y, _custom}` where `_custom` is the radius.
|