How to set up and style the Advanced Charts widget in Elementor.
Advanced Charts draws eight kinds of charts from values you type or CSV you paste. Charts animate when they scroll into view and show tooltips on hover. Use it for sales figures, survey results, statistics and reports.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Chart Type | The kind of chart: bar, horizontal bar, line, area, pie, doughnut, polar area or radar. |
| Data | Type the values, or paste CSV. |
| Labels | The labels along the chart, separated by commas, for example months. |
| Datasets | The repeater of data series. Each item is one dataset. |
| Name | The dataset name shown in the legend and tooltips. |
| Values | One number per label, separated by commas. Leave a value empty for a gap. |
| Color | The dataset color. Empty uses the built-in palette. |
| Slice Colors (pie, doughnut, polar) | Optional colors for each slice, separated by commas. |
| Dashed Line | Draws this dataset with a dashed line. |
| Draw as a Line (mixed chart) | In a vertical bar chart, shows this dataset as a line over the bars. |
| CSV | Pasted CSV: the first row holds the dataset names, each next row a label and its values. |
| Option | What it does |
|---|---|
| Title | A title printed above the chart. |
| Legend | Puts the legend at the top, bottom, left or right, or hides it. |
| Tooltips | Shows the values in a tooltip on hover. |
| Value Prefix | Text before every value, for example a currency sign. |
| Value Suffix | Text after every value, for example a percent sign. |
| Thousand Separators (1,250) | Formats large numbers with separators. |
| Start the Value Axis at 0 | Starts the value axis at zero. |
| Stack Datasets | Stacks the datasets in bar and area charts. |
| Line Curve | Sets how curved the lines are. 0 gives straight lines. |
| Fill Opacity (%) | Sets how solid the fill is in area and radar charts. |
| Gradient Fill | Fades the fill out toward the bottom in area and vertical bar charts. |
| Hole Size (%) | Sets the size of the hole in a doughnut chart. |
| Text in the Middle | Text in the doughnut hole. {total} shows the sum of the first dataset. |
| Animate When Scrolled Into View | Draws the chart with an animation when it scrolls into view. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
chart height, background, border, shadow, radius and padding of the box, and the title typography, color and margin.
label and legend color and size, grid line color, tooltip background and text colors, slice border color, and the middle text color and size.
The first row has a corner cell and then the dataset names. Every next row starts with the label, followed by one value per dataset.
Yes. Enter colors separated by commas in Slice Colors (pie, doughnut, polar), one per label. Slices without a color use the built-in palette.
Yes. Choose Bar (vertical) and turn on Draw as a Line (mixed chart) for the dataset that should be a line.
Each chart comes with a hidden table that holds the same labels and values, and the chart itself is labeled with its title.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide