Scatter chart definition and x-axis
Scatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.
charts/scatter
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Scatter chart configuration example
Example creating a scatter chart with 4 points: ```js const data = { datasets: [{ label: 'Scatter Dataset', data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }], backgroundColor: 'rgb(255, 99, 132)' }], }; const config = { type: 'scatter', data: data, options: { scales: { x: { type: 'linear', position: 'bottom' } } } }; ```
Scatter chart index scale type
The index scale for scatter charts is of type linear. When using the labels array, the values have to be numbers or parsable to numbers; the same applies to the object format for the keys.
Scatter chart dataset property namespaces
Scatter chart dataset properties use these namespaces: data.datasets[index] for options specific to that dataset, options.datasets.scatter for options applied to all scatter datasets, options.elements.line for options applied to all line elements, options.elements.point for options applied to all point elements, and options for options applied to the whole chart.
Scatter chart properties inheritance
The scatter chart supports all the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.
Scatter chart data format
The scatter chart only accepts data in point format with objects containing x and y properties. Example: data: [{x: 10, y: 20}, {x: 15, y: 10}]. The internal data format is {x, y}.
Scatter chart minimum components
Scatter chart requires ScatterController, PointElement, and default scales LinearScale for both x and y axes.
Scatter chart data point format
Data points in a scatter chart are generated using Utils.bubbles() with configuration parameters: count (number of points), rmin and rmax (radius range), min and max (value range from 0 to 100).
Scatter chart dataset properties
Scatter chart datasets use the following properties: label (string for dataset name), data (array of data points), borderColor (string for point outline color), and backgroundColor (string for point fill color, often using transparentize utility to add opacity).
Scatter chart with responsive sizing and plugins
A scatter chart is configured with responsive: true to enable responsive sizing. The plugins section includes legend positioned at 'top' and a title with display: true and text 'Chart.js Scatter Chart'.
Scatter chart basic setup with two datasets
A scatter chart is created with type 'scatter'. The example shows a configuration with two datasets, each containing data points with x and y coordinates. Each dataset has a label, borderColor, backgroundColor, and data array. The data is generated using Utils.bubbles() utility function with configuration specifying count, rmin, rmax, min, and max parameters.
Multiple y-axes in scatter chart - yAxisID property
Each dataset in a scatter chart can specify which y-axis it belongs to using the yAxisID property. This allows multiple datasets to use different y-axes simultaneously. The yAxisID value references a scale defined in the chart options scales configuration.
Scatter chart with multiple y-axes example
A scatter chart can use multiple y-axes by assigning datasets to different axis IDs via the yAxisID property. Each axis can have its own configuration including type, position, ticks styling, and grid settings. In this example, Dataset 1 uses yAxisID 'y' positioned on the left with red ticks, while Dataset 2 uses yAxisID 'y2' positioned on the right with blue ticks and a reversed scale. The second axis has drawOnChartArea set to false so grid lines only appear for one axis.