Config Options

  • animation.animateRotate: This is the boolean option, when it is set as true then the rotation animations are enabled.
  • animation.animateScale: This is the boolean option, when it is set as try, then it enables the scaling animations for the Chart from the center outwards.

Chart.js Polar Area Chart

Chart.js Polar Area Chart is the type of chart that represents the data in a circular shape format which is quite similar to the pie chart. Like the pie chart, each segment in the Polar Area chart has the same angle with the radius of the segment different from each other. This Polar Area chart is mainly used to provide a visual representation of comparative data.

Similar Reads

Dataset Properties

backgroundColor: This property defines the background color for each part of the segment in the Chart. borderAlign: This property is used to specify the alignment of the segment borders like center or inner. borderColor: This property is used to set the border color for each of the segment. borderDash: This properly defined the array of numbers to create a dashed border effect for the segments. borderDashOffset: This property mainly specifies the offset for the border sashes. borderJoinStyle: This property sets the style for the border joints like round, bevel, milter, etc. borderWidth: This property is used to specify the width of the border of each segment in the chart. clip: This property specified the clipping behavior in the chart area. data: This property defines the array of numbers which represents the data of each segment. hoverBackgroundColor: This property is used to specify the background color when hovering over the segment. hoverBorderColor: This property sets the border color when hovering is done. hoverBorderDash: This property defines the array of numbers for the dashed border effect when hovering over segments. hoverBorderDashOffset: This property specifies the offset for the hover border dashes. hoverBorderJoinStyle: This property sets the style for border joints when hovering over the segments. hoverBorderWidth: This property specifies the border width when hovering is done....

Config Options

animation.animateRotate: This is the boolean option, when it is set as true then the rotation animations are enabled. animation.animateScale: This is the boolean option, when it is set as try, then it enables the scaling animations for the Chart from the center outwards....

Syntax

new Chart($("#ID"), { type: 'polarArea', data: { labels: ["Label 1", "Label 2", "Label 3", /* ... */], datasets: [{ data: [value1, value2, value3, /* ... */], backgroundColor: ["Color 1", "Color 2", "Color 3", /* ... */], // Additional dataset options if needed }] }, options: { ... } });...

CDN link

...