Polar Area Chart

How to use Polar Area Chart Widget of Sky Addons for Elementor

The Polar Area widget lets you present data as segments of a circle, where each slice’s size represents a numeric value. It’s a perfect tool for comparing multiple data sets side-by-side in a visual and engaging format. Built on Chart.js and seamlessly integrated with Elementor, the widget allows for dynamic interactions, smooth animations, and full customization of colors, borders, and labels. Whether for reports, analytics, or surveys, this widget brings life to your data in a clean and intuitive style.

Features:

1. Display comparative data as radial segments
2. Smooth animation with responsive layout
3. Add multiple segments with custom label and value
4. Individual color and border control per segment
5. Show/hide tooltips, legends, and gridlines
6. Built-in animation support for engaging user experience
7. Full customization using Elementor’s live editor

Insert Polar Area Widget

1. Open Elementor Editor. In the Elementor panel, search for “Polar Area” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Chart Layout

1. Chart Height – Define the height of the chart in pixels.
2. Label Values – Enter labels separated by commas (e.g., January, February, March).
3. Add Repeater (Dataset) – Add one or more datasets with the following:
   • Label – Name of the dataset.
   • Data – Comma-separated values for each bar.
   • Background Color – Main color of bars.
   • Background Hover Color – Color on hover.
   • Border Color – Border color for each bar.
   • Hover Border Color – Border color on hover.
   • etc.

Additional Settings

1. Show Tooltips – Enable data tooltips on hover.
2. Show Title – Display a chart title.

Legend Settings

1. Show Legend – Toggle the legend display.
2. Position – Select position: Top, Bottom, Left, or Right.
3. Reverse – Reverse the order of legend items.

Animation Settings

1. Select Animation – Choose animation style.
2. Duration – Set animation duration in milliseconds.

Style Customization

Chart Section

Customize the main chart area to align with your website’s layout and design.

1. Padding – Adjust space around the chart to prevent overflow or tight layout.
2. Bar Border Width – Define the thickness of the data line.
3. Grid Color – Apply any color within the grid.
4. Grid Advanced Color – More features for colors.

Legend Section

Style the legend that displays dataset labels for better readability and aesthetics.

1. Text Color – Modify the color of the legend text to enhance visibility.
2. Box Height / Width – Adjust the size of the colored legend markers beside each label.
3. Typography – Fully control font family, size, weight, spacing, and style of legend text.

Ticks

1. Ticks Color – Modify the color of the Ticks to enhance visibility.
2. Typography – Fully control font family, size, weight, spacing, and style of Ticks text.

Tooltip Section

1. Alignment – Set how tooltip content aligns inside the box (left/center/right).
2. Padding – Add inner spacing so the content doesn’t feel cramped.
3. Background Color – Set a custom background to match or contrast your site.
4. Border Color / Width / Radius – Fine-tune the outline of the tooltip box.
5. Caret Size – Adjust the size of the little arrow pointing to the bar.
6. Title Color / Typography – Style the heading inside the tooltip.
7. Title Bottom Spacing – Add space between the title and body.
8. Body Color / Typography – Control the appearance of the detailed info shown in the tooltip.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. If chart doesn’t display: ensure label values and datasets match in count.
2. Check console for Chart.js related errors.
3. Make sure there are no conflicting scripts or caching issues.

Conclusion

The Polar Area widget offers a clean and impactful way to display categorized data on your website. With its easy configuration inside Elementor and support for rich customization, it’s a great solution for showcasing data comparisons in a circular format. Enhance user engagement and data clarity with just a few clicks—no coding needed!