charts/polar

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.

Polar area animation options

Polar area charts support two animation options: animation.animateRotate (boolean, default true) which makes the chart animate in with a rotation animation, and animation.animateScale (boolean, default true) which animates scaling the chart from the center outwards.

Override default polar area options globally

Default values for polar area charts can be changed globally by modifying Chart.overrides.polarArea. For example, to disable scale animation for all new polar area charts, set Chart.overrides.polarArea.animation.animateScale = false. Changing global options only affects charts created after the change; existing charts are not affected.

Polar area chart example

const data = { labels: [ 'Red', 'Green', 'Yellow', 'Grey', 'Blue' ], datasets: [{ label: 'My First Dataset', data: [11, 16, 7, 3, 14], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(75, 192, 192)', 'rgb(255, 205, 86)', 'rgb(201, 203, 207)', 'rgb(54, 162, 235)' ] }] }; const config = { type: 'polarArea', data: data, options: {} }; This example shows how to create a basic polar area chart with five colored segments.

Polar area data structure

For a polar area chart, datasets need to contain an array of numeric data points. Chart.js will total all numbers and calculate the relative proportion of each. An array of labels must also be specified so that tooltips appear correctly for each slice.

Polar area circular property

The circular property controls whether an arc is curved or flat. By default, circular is true and the arc is curved. When circular is false, the arc will be flat.

Polar area borderAlign values

The borderAlign property supports two values: 'center' (default) where borders of adjacent arcs overlap, and 'inner' where all borders are guaranteed not to overlap.

Polar area clip property

The clip property controls how content clips relative to the chartArea. A positive value allows overflow, a negative value clips that many pixels inside the chartArea, and 0 clips at the chartArea boundary. Clipping can also be configured per side using an object: clip: {left: 5, top: false, right: -2, bottom: 0}.

Polar area dataset properties

Polar area chart datasets support the following properties: backgroundColor (Color, scriptable and indexable, default 'rgba(0, 0, 0, 0.1)'), borderAlign ('center' or 'inner', scriptable and indexable, default 'center'), borderColor (Color, scriptable and indexable, default '#fff'), borderDash (number[], scriptable, default []), borderDashOffset (number, scriptable, default 0.0), borderJoinStyle ('round', 'bevel', or 'miter', scriptable and indexable, default undefined), borderWidth (number, scriptable and indexable, default 2), clip (number, object, or false, default undefined), data (number[], required), hoverBackgroundColor (Color, scriptable and indexable, default undefined), hoverBorderColor (Color, scriptable and indexable, default undefined), hoverBorderDash (number[], scriptable, default undefined), hoverBorderDashOffset (number, scriptable, default undefined), hoverBorderJoinStyle ('round', 'bevel', or 'miter', scriptable and indexable, default undefined), hoverBorderWidth (number, scriptable and indexable, default undefined), circular (boolean, scriptable and indexable, default true), spacing (number, default 0), and spacingMode ('angular', 'proportional', or 'parallel', default 'proportional').

Polar area chart type property

To create a polar area chart, set the chart config type to 'polarArea'.

Polar area chart definition

A polar area chart is similar to a pie chart, but each segment has the same angle and the radius of the segment differs depending on the value. This chart type is useful when you want to show comparison data similar to a pie chart but also show a scale of values for context.

Polar area scale

The polar area chart uses the radialLinear scale. Additional configuration is provided via the scale configuration.

PolarArea chart minimum components

PolarArea chart requires PolarAreaController, ArcElement, and default scale RadialLinearScale (r-axis).

Radial gradient example for polar area chart

This example demonstrates creating and caching radial gradients for a polar area chart. The gradient is created using the canvas API method createRadialGradient, centered on the chart area, with three color stops. The gradient is cached in a Map to avoid recreating it on every render unless the chart dimensions change. The example uses scriptable options to apply the gradient to arc element backgrounds based on data index and hover state.

createRadialGradient implementation

The createRadialGradient3 function accepts a context object and three color values (c1, c2, c3). It retrieves the chart area dimensions, checks if the cache needs clearing due to size changes, and either retrieves a cached gradient or creates a new one using ctx.createRadialGradient(). The gradient is centered on the chart area with a radius equal to the minimum of half the chart width or half the chart height. Color stops are added at positions 0, 0.5, and 1. The gradient is cached using a key combining the three colors.

Polar area chart example with centered point labels

Example showing how to configure a polar area chart with centered point labels. The configuration sets scales.r.pointLabels with display: true, centerPointLabels: true, and font.size: 18. This example uses 5 data points labeled Red, Orange, Yellow, Green, and Blue with transparent background colors.

Point labels configuration for polar area charts

Polar area charts support point labels configuration on the radial scale (r). The pointLabels object can include display (boolean to show/hide labels), centerPointLabels (boolean to center labels), and font options (such as size). These are configured under options.scales.r.pointLabels.

Polar Area chart dataset structure

A polar area dataset includes a label property, data array with numerical values, and backgroundColor array that can contain a color for each data point. The data values represent the radial distance for each segment.

Polar Area chart example configuration

This example shows a basic polar area chart configuration with responsive sizing enabled, a legend positioned at the top, and a title plugin displaying 'Chart.js Polar Area Chart'. The chart has one dataset with five labels (Red, Orange, Yellow, Green, Blue) and semi-transparent background colors for each segment.

Polar Area chart type value

The chart type for a polar area chart is 'polarArea'.

Polar area arc angle changed to degrees in v3

In Chart.js 3.x, the `elements.arc.angle` option for polar area charts is now configured in degrees instead of radians.

Polar area startAngle default changed in v3

In Chart.js 3.x, the polar area `startAngle` option is now consistent with Radar charts. 0 is at the top and the value is in degrees. The default changed from `-½π` to `0`.

Arc element scriptable options for polar charts

The arc element supports scriptable options including backgroundColor and hoverBackgroundColor, which can be set to functions that receive a context object. The context object contains a raw property with the raw data value for that segment.

Polar Area chart type identifier

The polarArea chart type is identified by the string 'polarArea' in the configuration object's type property.

Polar Area chart with scriptable options example

A working example of a polarArea chart that uses scriptable options to dynamically color segments based on data values. The colorize function returns different colors (#D60000, #F46300, #0358B6, #44DE28) based on value ranges (<35, <55, <75, ≥75) and adjusts opacity based on the raw value. The arc element's backgroundColor and hoverBackgroundColor properties are set using scriptable functions that receive the context object containing the raw data value.

Give your agent this brain