Radial Charts
The “EAE – Radial Charts” is an effective widget for comparing datasets of information in a visual and organized manner. It offers three different types of charts: Pie chart, Doughnut chart, and Polar chart, each with its own unique advantages.
With the ability to display a legend, the chart becomes an even more powerful tool for streamlining comparison work and achieving a higher level of accuracy in data analysis.
Whether you’re looking to highlight similarities or differences between data sets, Radial Charts can provide a clear and concise overview that is easy to interpret and understand.
The “Radial Charts” widget features the following controls:
Content
General
- Type: Choose from Pie, Doughnut, or Polar charts to present your data.
- Datasets: Specify the number of datasets you wish to compare.
![Radial Charts: Content Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-3.54.58-PM.png)
Dataset1
- Label: Enter the label of the dataset or select the dynamic tag option.
- Chart Data
- Content
- Label: Enter the label.
- Value: Enter the value.
![Radial Charts: Dataset Content Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-3.56.02-PM.png)
- Style(Individual item)
- Background Color: Select the background color.
- Background Hover Color: Select the background hover color.
- Border Color: Select the border color.
- Border Hover Color: Select the border hover color.
![Radial Charts: Dataset Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.00.04-PM-1.png)
Layout
- Height: Specify the height of the chart.
- Circular: Enable the circular mode if desired.
- Circumference: Specify the circumference of the chart.
- Rotation: Indicate the rotation for the chart.
- Border Radius: Set the border radius.
- Cutout: Specify the cutout value(Only for Doughnut Chart).
![Radial Charts: Layout Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.02.09-PM.png)
Normal
- Offset: Set the offset.
- Border Width: Set the border width.
![Radial Charts: Layout Settings(Normal)](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.02.42-PM.png)
Hover
- Hover Border Width: Set the border hover width.
- Hover Offset: Set the offset hover.
![Radial Charts: Layout Settings(Hover)](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.03.11-PM.png)
Animation
- Animation Duration: Enter animation duration.
- Animation: Choose the animation style.
- Animation Scale: Enable the option for animation scale.
![Radial Charts: Animation Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Content_Layout_Animation.png)
Legend(It will get color from Dataset 1 only)
- Enable Legend: Enable the legend if desired.
- Shape: Specify the shape for the legend, either Square or Circle.
- Position: Specify the position of the legend
- Alignment: Set the alignment of the legend.
- Reverse: To view the legend in reverse order, activate the corresponding option.
![Radial Charts: Legend Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Content_Layout_Legend.png)
Tooltip
- Enable Tooltips: Enable the option if desired.
![Radial Charts: Tooltip Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Content_Layout_Tooltip.png)
- Enable Ticks: To view the ticks, enable the corresponding option(Only for Polar Chart).
- Show Percentage: Enable the option to show percentage value(Only for Polar Chart).
- Enable Grid Line: To view the Grid line, activate the corresponding option(Only for Polar Chart).
![Radial Charts: Polar Chart Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.07.16-PM.png)
Style
Legend
- Box Height: Set the height of the box.
- Box Width: Set the width of the box.
- Font Size: Specify the font size.
- Font Weight: Set the font weight.
- Font Color: Select the color of the text.
![Radial Charts: Legend Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.08.10-PM.png)
Tooltip
- Background Color: Select the background color for the tooltip.
![Radial Charts: Tooltip Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.08.45-PM.png)
Title
- Font Size: Specify the font size.
- Font Weight: Set the font weight.
- Font Color: Select the color of the text.
![Radial Charts: Tooltip Title Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.09.30-PM.png)
Body
- Font Size: Specify the font size.
- Font Weight: Set the font weight.
- Font Color: Select the color of the text.
![Radial Charts: Tooltip Body Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.10.05-PM.png)
Polar Area
Note: This is only applicable for Polar Chart.
Ticks
- Color: Select the color of the ticks.
- Background Color: Select the background color of the ticks.
- Padding: Set the padding.
- Font Size: Set the font size.
![Radial Charts: Polar Area Ticks Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.10.40-PM.png)
Grid Line
- Grid Color: Specify the color of the grid line.
![Radial Charts: Polar Area Grid Line Style Settings](https://docs.wpvibes.com/wp-content/uploads/2023/05/Screenshot-2023-05-23-at-4.11.19-PM.png)