Radar Chart

How to use Radar Chart Widget of Sky Addons for Elementor

The Radar Chart widget lets you showcase multivariate data in a circular graph. Ideal for comparing values across multiple variables, each axis represents a different category, while data points are connected to form a web-like shape. Built on Chart.js and fully integrated with Elementor, this widget helps display performance metrics, skill ratings, and more. You can style each element, animate transitions, and control tooltips and gridlines, all without writing a line of code.

Features:

1. Multi-variable data visualization with web-style layout
2. Custom labels and values per dataset
3. Point, line, and grid customization options
4. Smooth animation and interactivity
5. Fully responsive and styleable within Elementor
6. Built-in animation support for engaging user experience
7. Full customization using Elementor’s live editor

Insert Radar Chart Widget

1. Open Elementor Editor. In the Elementor panel, search for “Radar Chart” 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 item per dataset, with the following:
   • Label – Name of the dataset.
   • Data – Comma-separated values, one for each label.
   • Background Color – Fill color of the dataset area.
   • Point Border Color and Point Background Color – Colors of the data points, each with a hover color.
   • Border Color – Color of the dataset line.
   • Add a second item to compare two datasets on the same web.

The chart in the Radar Chart demo uses seven month labels and two datasets, Sky Addons and Sky Addons Pro.

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. Line Tension – Controls the curve smoothness of lines.
4. Point Border Width – Defines the thickness of each point’s border.
5. Pointer Border Width – Sets the border width of data pointers.
6. Grid Color – Color for grid lines in the chart.
7. Grid Advanced Color – Adds extra styling to alternate grid areas.
8. Angle Lines Color – Changes the color of angle/axis lines.

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.

Point Labels

1. Text Color – Sets the color of axis labels.
2. Typography – Customize font size, weight, and style for labels.

Ticks

1. Text Color – Sets the color of value indicators (ticks).
2. Typography – Controls font styling of tick numbers.

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.

The Chart style section holds Bar Border Width, Line Tension, Pointer Border Width (4 here), Grid Color and Angle Lines Color.

Save and Preview

1. Once you’ve customized and styled your chart, 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 Radar Chart widget is a dynamic and informative way to represent complex data. Whether you’re visualizing performance, progress, or comparisons across multiple factors, this chart delivers both clarity and style. Thanks to Elementor integration and extensive customization options, you can create engaging data stories quickly and intuitively.

Need help? Our team is happy to answer questions on the Sky Addons support page.