Recommend this page to a friend! |
Classes of Jorge Castro | Gentelella BladeOne | vendors/gentelella/vendors/Chart.js/docs/06-Polar-Area-Chart.md | Download |
|
Downloadtitle: Polar Area Chart anchor: polar-area-chartIntroductionPolar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context. <div class="canvas-holder">
</div> Example Usage
Data StructureThe following options can be included in a polar area chart dataset to configure options for that specific dataset. Some properties are specified as arrays. The first value applies to the first bar, the second value to the second bar, and so on. Property | Type | Usage
--- | --- | ---
data | An example data object using these attributes is shown below.
As you can see, for the chart data you pass in an array of objects, with a value and a colour. The value attribute should be a number, while the color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL. Chart OptionsThese are the customisation options specific to Polar Area charts. These options are merged with the global chart configuration options, and form the options of the chart. Name | Type | Default | Description
--- | --- | --- | ---
scale | Object | See Scales and Defaults for Radial Linear Scale | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid.
scale.type | String |"radialLinear" | As defined in "Radial Linear".
scale.lineArc | Boolean | true | When true, lines are circular.
animation.animateRotate | Boolean |true | If true, will animate the rotation of the chart.
animation.animateScale | Boolean | true | If true, will animate scaling the chart.
legend.labels.generateLabels | Function | You can override these for your For example, we could have a polar area chart with a black stroke on each segment like so:
We can also change these defaults values for each PolarArea type that is created, this object is available at |