Radar chart purpose and use cases
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
charts/radar
30 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Radar chart dataset properties table
Radar chart dataset properties with their types, scriptability, indexability, and defaults: backgroundColor (Color, scriptable, default 'rgba(0, 0, 0, 0.1)'), borderCapStyle (string, scriptable, default 'butt'), borderColor (Color, scriptable, default 'rgba(0, 0, 0, 0.1)'), borderDash (number[], scriptable, default []), borderDashOffset (number, scriptable, default 0.0), borderJoinStyle ('round'|'bevel'|'miter', scriptable, default 'miter'), borderWidth (number, scriptable, default 3), hoverBackgroundColor (Color, scriptable, default undefined), hoverBorderCapStyle (string, scriptable, default undefined), hoverBorderColor (Color, scriptable, default undefined), hoverBorderDash (number[], scriptable, default undefined), hoverBorderDashOffset (number, scriptable, default undefined), hoverBorderJoinStyle ('round'|'bevel'|'miter', scriptable, default undefined), hoverBorderWidth (number, scriptable, default undefined), clip (number|object|false, default undefined), data (number[], required), fill (boolean|string, scriptable, default false), label (string, default ''), order (number, default 0), tension (number, default 0), pointBackgroundColor (Color, scriptable and indexable, default 'rgba(0, 0, 0, 0.1)'), pointBorderColor (Color, scriptable and indexable, default 'rgba(0, 0, 0, 0.1)'), pointBorderWidth (number, scriptable and indexable, default 1), pointHitRadius (number, scriptable and indexable, default 1), pointHoverBackgroundColor (Color, scriptable and indexable, default undefined), pointHoverBorderColor (Color, scriptable and indexable, default undefined), pointHoverBorderWidth (number, scriptable and indexable, default 1), pointHoverRadius (number, scriptable and indexable, default 4), pointRadius (number, scriptable and indexable, default 3), pointRotation (number, scriptable and indexable, default 0), pointStyle (pointStyle, scriptable and indexable, default 'circle'), spanGaps (boolean, default undefined). Undefined values fallback to scopes described in option resolution.
Radar chart example with two datasets
Example of creating a radar chart with two datasets: const data = { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [{ label: 'My First Dataset', data: [65, 59, 90, 81, 56, 55, 40], fill: true, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', pointBackgroundColor: 'rgb(255, 99, 132)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(255, 99, 132)' }, { label: 'My Second Dataset', data: [28, 48, 40, 19, 96, 27, 100], fill: true, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgb(54, 162, 235)', pointBackgroundColor: 'rgb(54, 162, 235)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(54, 162, 235)' }] }; const config = { type: 'radar', data: data, options: { elements: { line: { borderWidth: 3 } } } };
Radar chart dataset configuration namespaces
Radar chart configuration namespaces are: data.datasets[index] for options for this dataset only, options.datasets.line for options for all line datasets, options.elements.line for options for all line elements, options.elements.point for options for all point elements, options for options for the whole chart.
Radar chart internal data format
Radar chart internal data format is {x, y}.
Radar chart data structure
The data property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index. Example: data: [20, 10]. For context, include an array of strings in data.labels that show around each point: data: { labels: ['Running', 'Swimming', 'Eating', 'Cycling'], datasets: [{ data: [20, 10, 4, 2] }] }
Radar chart global default options
Global radar chart settings are stored in Chart.overrides.radar. Changing the global options only affects charts created after the change. Existing charts are not changed.
Radar chart scale example with angleLines
Example of configuring radar chart scales: options = { scales: { r: { angleLines: { display: false }, suggestedMin: 50, suggestedMax: 100 } } };
Radar chart scale configuration
The radar chart supports only a single scale. The options for this scale are defined in the scales.r property, which can be referenced from the Linear Radial Axis documentation.
Radar chart hover point interaction properties
Point hover interactions for radar charts are controlled with: pointHoverBackgroundColor (point background color when hovered), pointHoverBorderColor (point border color when hovered), pointHoverBorderWidth (border width of point when hovered), pointHoverRadius (the radius of the point when hovered).
Radar chart line styling properties
Line styling for radar charts is controlled with: backgroundColor (the line fill color), borderCapStyle (cap style of the line), borderColor (the line color), borderDash (length and spacing of dashes), borderDashOffset (offset for line dashes), borderJoinStyle (line joint style: 'round', 'bevel', or 'miter'), borderWidth (the line width in pixels), fill (how to fill the area under the line), tension (Bezier curve tension of the line; set to 0 to draw straight lines), spanGaps (if true, lines will be drawn between points with no or null data; if false, points with null data will create a break in the line). Undefined values fallback to associated elements.line options.
Radar chart point styling properties
Point styling for radar charts is controlled with: pointBackgroundColor (the fill color for points), pointBorderColor (the border color for points), pointBorderWidth (the width of the point border in pixels), pointHitRadius (the pixel size of the non-displayed point that reacts to mouse events), pointRadius (the radius of the point shape; if set to 0, the point is not rendered), pointRotation (the rotation of the point in degrees), pointStyle (style of the point). These values fallback first to dataset options, then to associated elements.point options.
Radar chart order property
The order property sets the drawing order of a dataset. It also affects the order for tooltip and legend. Higher values are drawn on top.
Radar chart clip property
The clip property controls how to clip relative to chartArea. A positive value allows overflow, a negative value clips that many pixels inside chartArea. A value of 0 means clip at chartArea. Clipping can also be configured per side with an object: clip: {left: 5, top: false, right: -2, bottom: 0}.
Radar chart labels requirement
When using object notation in a radar chart, a labels array is still required with labels for the chart to show correctly.
Radar chart minimum components
Radar chart requires RadarController, LineElement, PointElement, and default scale RadialLinearScale (r-axis).
Radar chart with stacked fill example
This example demonstrates a radar chart with multiple datasets using different fill modes to create a stacked area effect. The datasets use fill values of '-1' (fill to previous dataset), positive integers (fill to specific dataset index), false (no fill), or an object with a value property (fill to specific percentage on the axis). The filler plugin is configured with propagate set to false. The chart includes interactive controls to randomize data, toggle propagate mode, and toggle line smoothing via tension.
Radar chart fill modes configuration
In radar charts, the fill property on datasets controls area filling behavior. The fill property can be set to: false (no fill), a string like '-1' (fill to previous dataset), a positive integer like 1 (fill to dataset at that index), or an object like {value: 85} (fill to a specific percentage on the axis).
Radar chart line tension for smoothing
Radar chart lines can be smoothed by setting the elements.line.tension option. A tension value of 0 produces sharp lines, while values like 0.4 produce smooth curved lines.
Radar chart interaction mode configuration
Radar charts support an interaction.intersect option. Setting it to false allows interaction with data points without requiring the cursor to be exactly at the intersection point.
Radar chart with null data points skip positions
In a radar chart, setting a data point to null causes that position to be skipped on the chart. This allows you to omit specific points from visualization while maintaining the position indices for other datasets.
Radar chart example with multiple datasets skipping different points
A radar chart can display multiple datasets where each dataset skips different points: one skips the first point, one skips the middle point, and one skips the last point. Each dataset is assigned a unique label and color combination using borderColor and backgroundColor properties.
Radar chart configuration type
To create a radar chart, set the chart type to 'radar' in the configuration object.
Radar chart dataset properties
Radar chart datasets support label, data, borderColor, and backgroundColor properties. The backgroundColor is typically set to a semi-transparent version of the borderColor using Utils.transparentize().
Radar chart basic example
A radar chart is created with type 'radar'. The example shows a chart with two datasets containing 7 data points each. Each dataset has a label, data array, borderColor, and semi-transparent backgroundColor. The chart is rendered with responsive: true and displays a title via the plugins.title configuration.
Radar chart label formatting with arrays
Radar chart labels can be arrays of strings to create multi-line labels. For example, ['Eating', 'Dinner'] will display as two lines for a single label on the radar.
Radar chart scriptable options example
A radar chart can use scriptable options for styling elements based on context. The example shows how to apply dynamic colors, point styles, opacity, and radius calculations. Functions receive a context object with properties like ctx.datasetIndex, ctx.dataIndex, and ctx.parsed.y to determine styling for each element.
Radar chart scriptable point style alternation
Point styles in a radar chart can be made scriptable to alternate between different shapes. The function receives ctx.dataIndex and can return different point style values like 'circle' or 'rect' based on whether the index is even or odd.
Radar chart line and point element configuration
Radar chart line elements can be configured with backgroundColor and borderColor options. Point elements can be configured with backgroundColor, hoverBackgroundColor, radius, pointStyle, and hoverRadius options, all of which support scriptable functions.
Radar chart dynamic point radius based on data value
Point radius in radar charts can be set as a scriptable function that examines ctx.parsed.y (the data value) and returns different radius sizes based on thresholds. For example: values less than 10 get radius 5, 10-25 get radius 7, 25-50 get radius 9, 50-75 get radius 11, and 75+ get radius 15.