This article provides a step-by-step manual for creating and displaying charts in Elementor using the EAC Chart component.
You’ll find clear instructions to set up pie, bar, radar, and flow charts: adding the widget, configuring datasets, customizing colors and labels, adjusting axes and tooltips, and optimizing responsiveness. The guide includes practical tips for formatting data.
Use the Chart component
The Elementor plugin is installed and active.
The EAC components plugin is installed and active.
From the settings panel you have to drag & drop the Chart icon on the panel preview.
Select the type of chart to display
In the Settings section, you must enter the chart title and select the type of chart you want to configure.
Define the data for the X-Axis
In the X Axis section, enter the axis title and data. Each value is separated by a comma without a space.
Define the data for the Y-Axis
In the Y Axis section, you must enter the axis title,
activate the Add suffix toggle if you want each value to have a prefix, for example monetary values with their unit,
Stacked for the Chart bar type, the data will be stacked,
Add line allows you to add a second Y axis on the right,
for each repeater you create, you will enter the title and related data. Each piece of data is separated from the other by a comma. You must enter as much data as there is for the X axis.
Select the content to display
In the Content section, you can display the legend, the grids for the X and Y axes, and the values.
Apply styles to chart elements
To apply styles to elements, go to the Style section, where you will find the colors you want to apply to each series in the chart.
You can choose colors from your current palette (Global colors), a random color palette (Random color), or leave the default colors.
For the rest of the styles, the labels are sufficiently meaningful.
