Content · Elementor
Charts widget for Elementor
Bar, line, pie, or radar charts from values you enter in the widget.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Bar, line, pie, or radar charts from values you enter in the widget.
render() writes HTML data attributes: data-settings.
Maps need a Google Maps API key; the widget prints a map container that JS initializes.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-settings.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Charts”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Data Source”, “CSV Source”, “Separator”, “Remote URL”. Style and Content tabs are listed on this page.
When to use it
- A results section.
- A report landing page.
- A simple stats explainer.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Charts.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Data Source | The chosen value is read in render() and applied on the front end. Options: Custom; File. |
| General — CSV Source | Options: Remote URL; File. |
| General — Separator | Text inspector control (`data_csv_separator`). |
| General — Remote URL | Text inspector control (`data_source_csv_url`). |
| General — Upload CSV File | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — Chart Styles | Doughnut, pie and polar area charts only work with custom data source. |
| General — Data Grid Type | The chosen value is read in render() and applied on the front end. Options: Linear; Logarithmic. |
| General — Column Width | Numeric value used in this widget’s render/JS (default 0.5, min 0, max 1). |
| General — Exclude Data on Legend Click | Switcher inspector control (`exclude_dataset_on_click`). |
| General — Enable Stacked Chart | Switcher inspector control (`stacked_bar_chart`). |
| General — Show Data Values | Switcher inspector control (`inner_datalabels`). |
| General — Min-Max Values | Switcher inspector control (`enable_min_max`). |
| General — Min. Value | Numeric control (default -100). |
| General — Max. Value | Numeric control (default 100). |
| General — Animation | Switcher inspector control (`chart_animation`). |
| General — Loop | Switcher inspector control (`chart_animation_loop`). |
| General — Animation Duration (ms) | Numeric control (default 1000, min 1). |
| General — Animation Timing | Options: linear; easeInBack; easeInBounce; easeInCirc; easeInCubic; easeInElastic; easeInExpo; easeInOutBack…. |
| Data — Data Labels | Enter the comma-separated list of values (Used only with custom data source). |
| Set Data — Label | Text inspector control (`chart_data_label`). |
| Set Data — Data | Text inspector control (`chart_data_set`). |
| Set Data (Normal) — Background Color | Color written to this widget’s CSS selector. |
| Set Data (Normal) — Border Color | Color written to this widget’s CSS selector. |
| Set Data (Hover) — Background Color | Color written to this widget’s CSS selector. |
| Set Data (Hover) — Border Color | Color written to this widget’s CSS selector. |
| Set Data — Border Width | Numeric control (default 1). |
| Data — Set Data | Repeater rows; render() loops each item to build the list or slides. |
| Axis — Grid Lines | Switcher inspector control (`display_r_axis`). |
| Axis — Grid Line Width | Numeric control (default 1). |
| Axis — Ticks (Labels) | Switcher inspector control (`display_r_ticks`). |
| Axis — Step Size | Numeric control (default 0, min 0, max 360). |
| Axis — Border Dash length | Numeric control (default 1). |
| Axis — Border Dash spacing | Numeric control (default 1). |
| Axis — Border Dash offset | Numeric control (default 1). |
| Axis — Grid Lines (Display X Axis) | Switcher inspector control (`display_x_axis`). |
| Axis — Grid Line Width (Grid Line Width X) | Numeric control (default 1). |
| Axis — Ticks (Labels) (Display X Ticks) | Switcher inspector control (`display_x_ticks`). |
| Axis — Step Size (X Step Size) | Numeric control (default 0, min 0, max 360). |
| Axis — Show Title | Switcher inspector control (`display_x_axis_title`). |
| Axis — Title | Text inspector control (`x_axis_title`). |
| Axis — Ticks (Labels) Rotation | Numeric control (default 0, min 0, max 360). |
| Axis — Grid Lines (Display Y Axis) | Switcher inspector control (`display_y_axis`). |
| Axis — Grid Line Width (Grid Line Width Y) | Numeric control (default 1). |
| Axis — Ticks (Labels) (Display Y Ticks) | Switcher inspector control (`display_y_ticks`). |
| Axis — Step Size (Y Step Size) | Numeric control (default 0, min 0, max 360). |
| Axis — Show Title (Display Y Axis Title) | Switcher inspector control (`display_y_axis_title`). |
| Axis — Title (Y Axis Title) | Text inspector control (`y_axis_title`). |
| Axis — Ticks (Labels) Rotation (Labels Rotation Y Axis) | Numeric control (default 0, min 0, max 360). |
| Axis — Reverse Charts | Switcher inspector control (`reverse_x`). |
| Axis — Reverse Charts (Reverse Y) | Switcher inspector control (`reverse_y`). |
| Axis — Border Dash length (Border Dash Length) | Numeric control (default 1). |
| Axis — Border Dash spacing (Border Dash Spacing) | Numeric control (default 1). |
| Axis — Border Dash offset (Border Dash Offset) | Numeric control (default 1). |
| Title — Show Title | Switcher inspector control (`show_chart_title`). |
| Title | Text inspector control (`chart_title`). |
| Title — Position | Options: Top; Right; Bottom; Left. |
| Title — Align | Options: Start; Center; End. |
| Legends — Show Legends | Switcher inspector control (`show_chart_legend`). |
| Legends — Reverse | Switcher inspector control (`reverse_legend`). |
| Legends — Shape | Options: Rectangle; Point. |
| Legends — Position | Options: Top; Right; Bottom; Left; chartArea. |
| Legends — Align | Options: Start; Center; End. |
| Tooltip — Show Tooltip | Switcher inspector control (`show_chart_tooltip`). |
| Tooltip — Convert Values to Percents | Switcher inspector control (`tooltips_percent`). |
| Tooltip — Show Tooltip On | Options: Hover; Click. |
| Tooltip — Interaction Mode | Options: Point; Index; Dataset. |
| Tooltip — Position | Options: Nearest; Average. |
| Lines — Show Lines | Switcher inspector control (`show_lines`). |
| Lines — Show Background Fill | Switcher inspector control (`chart_type_line_fill`). |
| Lines — Show Dots | Switcher inspector control (`line_dots`). |
| Lines — Dots Size | Spacing/size control (min 0, max 50). |
| Responsive — Responsive Layout | Enables scrollbar on tablet and mobile screens. |
| Responsive — Min Width (px) | Writes CSS `min-width` onto the widget’s front-end markup. (min 0, max 1600). |
| Responsive — Min Height (px) | Writes CSS `min-height` onto the widget’s front-end markup. (min 0, max 1600). |
| Data Values — Color | Color written to this widget’s CSS selector. |
| Data Values — Font Family | Use only the fonts located under System options group. |
| Data Values — Font Style | Options: Normal; Italic; Oblique. |
| Data Values — Font Weight | Numeric control (default 600, min 0). |
| Data Values — Font Size | Spacing/size control (min 10, max 100). |
| Axis — Color | Color written to this widget’s CSS selector. |
| Axis — Color (Axis Grid Line Color R) | Color written to this widget’s CSS selector. |
| Axis — Color (Axis Labels Color) | Color written to this widget’s CSS selector. |
| Axis — Background Color | Color written to this widget’s CSS selector. |
| Axis — Padding | Spacing/size control (min 0, max 100). |
| Axis — Color (Chart Point Labels Color R) | Color written to this widget’s CSS selector. |
| Axis — Font Family | Use only the fonts located under System options group. |
| Axis — Font Style | Options: Normal; Italic; Oblique. |
| Axis — Font Weight | Numeric control (default 600, min 0). |
| Axis — Font Size | Spacing/size control (min 10, max 100). |
| Axis — Color (X) | Color written to this widget’s CSS selector. |
| Axis — Color (Y) | Color written to this widget’s CSS selector. |
| Axis — Color (X) (Axis Title Color X) | Color written to this widget’s CSS selector. |
| Axis — Font Family (Axis Title Font Family X) | Use only the fonts located under System options group. |
| Axis — Font Style (Axis Title Font Style X) | Options: Normal; Italic; Oblique. |
| Axis — Font Weight (Axis Title Font Weight X) | Numeric control (default 600, min 0). |
| Axis — Font Size (Axis Title Font Size X) | Spacing/size control (min 10, max 100). |
| Axis — Color (Y) (Axis Title Color Y) | Color written to this widget’s CSS selector. |
| Axis — Font Family (Axis Title Font Family Y) | Use only the fonts located under System options group. |
| Axis — Font Style (Axis Title Font Style Y) | Options: Normal; Italic; Oblique. |
| Axis — Font Weight (Axis Title Font Weight Y) | Numeric control (default 600, min 0). |
| Axis — Font Size (Axis Title Font Size Y) | Spacing/size control (min 10, max 100). |
| Axis — Ticks Color (X) | Color written to this widget’s CSS selector. |
| Axis — Font Family (Ticks Font Family X) | Use only the fonts located under System options group. |
| Axis — Font Style (Ticks Font Style X) | Options: Normal; Italic; Oblique. |
| Axis — Font Weight (Ticks Font Weight X) | Numeric control (default 600, min 0). |
| Axis — Font Size (Ticks Font Size X) | Spacing/size control (min 10, max 100). |
| Axis — Distance | Spacing/size control (min 0, max 50). |
| Axis — Ticks Color (Y) | Color written to this widget’s CSS selector. |
| Axis — Font Family (Ticks Font Family Y) | Use only the fonts located under System options group. |
| Axis — Font Style (Ticks Font Style Y) | Options: Normal; Italic; Oblique. |
| Axis — Font Weight (Ticks Font Weight Y) | Numeric control (default 600, min 0). |
| Axis — Font Size (Ticks Font Size Y) | Spacing/size control (min 10, max 100). |
| Axis — Distance (Ticks Padding Y) | Spacing/size control (min 0, max 50). |
| Title — Color | Color written to this widget’s CSS selector. |
| Title — Font Family | Use only the fonts located under System options group. |
| Title — Font Style | Options: Normal; Italic; Oblique. |
| Title — Font Weight | Numeric control (default 600, min 0). |
| Title — Font Size | Spacing/size control (min 10, max 100). |
| Title — Padding | Spacing/size control (min 0, max 50). |
| Legend — Color | Color written to this widget’s CSS selector. |
| Legend — Font Family | Use only the fonts located under System options group. |
| Legend — Font Style | Options: Normal; Italic; Oblique. |
| Legend — Font Weight | Numeric control (default 600, min 0). |
| Legend — Font Size | Spacing/size control (min 10, max 100). |
| Legend — Box Size | Spacing/size control (min 0, max 200). |
| Legend — Gutter | Spacing/size control (min 0, max 50). |
| Tooltip — Background Color | Color written to this widget’s CSS selector. |
| Tooltip — Padding | Spacing/size control (min 0, max 100). |
| Tooltip — Triangle Size | Spacing/size control (min 0, max 100). |
| Tooltip — Title Color | Color written to this widget’s CSS selector. |
| Tooltip — Font Family | Use only the fonts located under System options group. |
| Tooltip — Font Size | Spacing/size control (min 10, max 100). |
| Tooltip — Title Spacing | Spacing/size control (min 0, max 50). |
| Tooltip — Title Alignment | Options: Left; Center; Right. |
| Tooltip — Item Color | Color written to this widget’s CSS selector. |
| Tooltip — Font Family (Chart Tooltip Item Font) | Use only the fonts located under System options group. |
| Tooltip — Font Size (Chart Tooltip Item Font Size) | Spacing/size control (min 10, max 100). |
| Tooltip — Item Spacing | Spacing/size control (min 0, max 50). |
| Tooltip — Item Alignment | Options: Left; Center; Right. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Charts options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Why is Charts blank?
The map JS needs a valid Google Maps API key. The Elementor preview can look empty until the key is set and you view the front end.
How do I add Charts in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Charts”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Progress Bar
A bar that shows a percent or goal (skills, fundraising, completion).
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Reading Progress Bar
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
Tabs
Tabbed content so related blocks share one footprint: specs, shipping, and reviews without separate sections.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Charts after you activate it.