Elementor Chart Plugin Documentation

Overview #

The Elementor Chart Plugin by WP Hoop empowers users to create stunning, interactive charts directly within the Elementor page builder. With its intuitive interface, you can design, customize, and display a variety of charts to enhance your website’s data visualization.

Features #

• Diverse Chart Types: Create bar, line, pie, doughnut, radar, polar area charts, and more.
• Customizable Options: Tailor chart colors, labels, tooltips, and fonts to fit your brand.
• Responsive Design: Ensure charts look great on any device.
• Dynamic Data Input: Easily input data using Elementor’s editing interface.
• Interactive Animations: Smooth animations for dynamic and engaging visuals.

Installation #

1. Download and Install #

1. Download the plugin from the WP Hoop website.
2. Log in to your WordPress dashboard.
3. Navigate to Plugins > Add New > Upload Plugin.
4. Select the plugin ZIP file and click Install Now.
5. Once installed, click Activate Plugin.

2. Prerequisites #

• Ensure the Elementor plugin is installed and activated.
• WordPress version 5.6 or higher is recommended.

Usage #

Adding a Chart #

1. Open the Elementor Editor.
2. In the left panel, search for the Chart widget.
3. Drag and drop the widget into the desired section of your page.

Configuring Chart Settings #

• Select Chart Type: Choose the chart type (e.g., bar, line, pie) in the settings panel.
• Input Data:
  • Add labels for the data categories.
  • Input numerical values for each category.
• Customize Appearance:
  • Adjust colors, fonts, and borders.
  • Enable or disable tooltips and legends.

Publishing Your Chart #

1. Preview the changes to ensure everything looks correct.
2. Click Publish to make the chart live.

Customization Options #

General Settings #

• Chart Title: Add and style a title for the chart.
• 18+ Different types of chart widget
• 4 different types of external integration.
• Legend, marker/Pointer, Stroke , x axis , y axis feature available here.
• Responsive Behavior: Adjust settings for mobile, tablet, and desktop views.

Styling #

• Colors: Define the color scheme for bars, lines, or segments.
• Fonts: Customize font family, size, and weight for labels and titles.
• Borders: Add or modify border styles and thickness.

Animation #

• Enable animation effects for smoother transitions when loading charts.
• Configure animation speed and easing styles.

Troubleshooting #

Common Issues #

1. Chart Not Displaying:
   • Verify that the data input fields are filled correctly.
   • Ensure the plugin is compatible with your Elementor and WordPress versions.
2. Chart Display Issues on Mobile:
   • Check the responsive settings in Elementor.
   • Adjust padding and margins for smaller screens.

Support #

For additional help, visit the WP Hoop support page or contact the support team via email.

Updates and Compatibility #

• Regularly update the plugin to access new features and maintain compatibility with the latest WordPress and Elementor versions.
• Check the changelog for details on recent updates.

Additional Resources #

• WP Hoop Elementor Chart Plugin Page
• Elementor Documentation
• WordPress Plugin Development Guide

With the Elementor Chart Plugin, you can create visually appealing, interactive charts to enhance your website’s user experience and effectively present data.