See this widget in action here.
Want to display data visually on your WordPress site with interactive charts? The Charts widget in aThemes Addons for Elementor lets you create bar, line, pie, doughnut, radar, and polar area charts to present data in a clear, engaging format.
In this guide, we’ll walk you through how to activate, configure, and style the Charts widget in aThemes Addons.
Table of Contents
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.
The Charts Widget allows you to create visually stunning and fully customizable charts using various data types and styles. Perfect for presenting statistics, comparisons, and data-driven content with ease and clarity.
Activating the Widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it:
- Navigate to the aThemes Addons dashboard in your WordPress admin area.
- Search for the Charts widget.
- Toggle the switch to activate it. The widget will now be available in the Elementor interface.
Exploring Widget Options
After adding the Charts widget to your page, you’ll find settings for chart type, data configuration, and display preferences in the Content tab.
Chart settings
The Chart Settings section controls the type, data, and behavior of your chart. Configure these options:
- Chart Type: Choose from Bar, Line, Pie, Doughnut, Radar, or Polar Area charts.
- Title: Add a title to your chart for better context.
- Subtitle: Include a subtitle for additional information.
- Alignment: Align the title and subtitle to the left, center, or right.
- Items: Add and configure data points or groups for the chart. Define titles, values, colors, and styles.
- Height: Adjust the chart height to fit your design.
- Tooltips: Show or hide tooltips for data points.
- Animation: Enable animations for smoother chart transitions.
- Legend: Show or hide the legend, and customize its position and alignment.
- Axes: Display or hide the X and Y axes for better clarity.
Customizing Style Options
Switch to the Style tab to customize the visual appearance of your chart. Adjust these settings:
- Chart Background: Apply a background color to the chart container.
- Title and Subtitle: Customize the typography and colors for the title and subtitle.
- Bars: Adjust bar thickness for Bar charts.
- Legend: Configure legend colors, fonts, sizes, and weights.
- Tooltips: Customize tooltip background color, padding, and text styles.
- Borders and Spacing: Add borders, padding, and margin to refine the chart appearance.
That’s it! You’ve successfully set up the Charts widget in aThemes Addons for Elementor.
Next, would you like to add a click-to-call button for your visitors? Check out our guide on using the Click to Call widget to learn more.
