Content · Elementor
KPI Tiles with Microcharts widget for Elementor
KPI tiles with a number, delta, and a small sparkline — dashboard-style stats, not a full chart.
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
KPI tiles with a number, delta, and a small sparkline — dashboard-style stats, not a full chart.
KPI Tiles with Microcharts Widget (Free).
render() writes HTML data attributes: data-card-link, data-card-link-rel, data-card-link-target.
The widget script reads data attributes: data-card-link.
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 “KPI Tiles with Microcharts”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Title”, “Value”, “Value Prefix”, “Value Suffix”. Style and Content tabs are listed on this page.
When to use it
- A SaaS homepage metric row.
- An annual-report recap.
- An impact / nonprofit stats band.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Tiles — Title | Text inspector control (`kng_tile_title`). |
| Tiles — Value | Numeric control (default 128000). |
| Tiles — Value Prefix | Text inspector control (`kng_tile_prefix`). |
| Tiles — Value Suffix | Text inspector control (`kng_tile_suffix`). |
| Tiles — Decimals | Numeric control (default 0, min 0, max 4). |
| Tiles — Thousands Separator | Options: Auto; Comma; Dot; Space. |
| Tiles — Show Delta | Switcher inspector control (`kng_tile_show_delta`). |
| Tiles — Trend Direction | Options: Up; Down; Flat. |
| Tiles — Delta Type | Options: Percent; Absolute. |
| Tiles — Delta Value | Numeric control (default 12). |
| Tiles — Delta Decimals | Numeric control (default 0, min 0, max 4). |
| Tiles — Delta Thousands Separator | Options: Auto; Comma; Dot; Space. |
| Tiles — Delta Prefix | Text inspector control (`kng_tile_delta_prefix`). |
| Tiles — Delta Suffix | Text inspector control (`kng_tile_delta_suffix`). |
| Tiles — Period Label | Text inspector control (`kng_tile_period`). |
| Tiles — Show Sparkline | Switcher inspector control (`kng_tile_show_sparkline`). |
| Tiles — Sparkline Values | Comma separated numbers. Min 2, max 50. |
| Tiles — Secondary Value | Text inspector control (`kng_tile_secondary`). |
| Tiles — Badge | Text inspector control (`kng_tile_badge`). |
| Tiles — Tile Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| KPI Tiles — Tiles | Repeater rows; render() loops each item to build the list or slides. |
| Layout — Columns | Writes CSS `grid-template-columns` onto the widget’s front-end markup. (default 4, min 1, max 6). |
| Layout — Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 80). |
| Layout — Equal Height | Switcher inspector control (`kng_equal_height`). |
| Layout — Tile Min Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 0, max 600). |
| Layout — Content Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| Sparkline — Smoothing | Switcher inspector control (`kng_sparkline_smooth`). |
| Sparkline — Show Last Dot | Switcher inspector control (`kng_sparkline_last_dot`). |
| Sparkline — Zero Baseline | Switcher inspector control (`kng_sparkline_zero_baseline`). |
| Wall / Grid — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-kpi-tiles`. |
| Wall / Grid — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Tile — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__card`. |
| Tile — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__card`. |
| Tile — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
| Tile — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__card`. |
| Tile — Box Shadow (Kng Tile Shadow Hover) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__card:hover`. |
| Tile — Hover Lift | Writes CSS (card, transform) onto the widget’s front-end markup. (min 0, max 30). |
| Tile — Content Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 30). |
| Tile — Inner Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__title`. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Value — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__value`. |
| Value — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Value — Typography (Kng Value Affix Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__value-prefix, {{WRAPPER}} .king-addons-kpi-tiles__v…`. |
| Value — Prefix/Suffix Color | Writes CSS `color` onto the widget’s front-end markup. |
| Delta — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__delta`. |
| Delta — Delta Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 24). |
| Delta — Icon Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 10, max 32). |
| Delta — Positive Color | Color written to this widget’s CSS selector. |
| Delta — Negative Color | Color written to this widget’s CSS selector. |
| Delta — Neutral Color | Color written to this widget’s CSS selector. |
| Delta — Typography (Kng Period Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__delta-period`. |
| Delta — Period Color | Writes CSS `color` onto the widget’s front-end markup. |
| Sparkline — Stroke Color | Leave empty to use trend colors. |
| Sparkline — Height | Writes CSS `height` onto the widget’s front-end markup. (min 20, max 120). |
| Sparkline — Stroke Width | Writes CSS `stroke-width` onto the widget’s front-end markup. (min 1, max 6). |
| Sparkline — Dot Size | Writes CSS `r` onto the widget’s front-end markup. (min 0, max 10). |
| Footer Meta — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__secondary`. |
| Footer Meta — Secondary Color | Writes CSS `color` onto the widget’s front-end markup. |
| Footer Meta — Typography (Kng Badge Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-kpi-tiles__badge`. |
| Footer Meta — Badge Color | Writes CSS `color` onto the widget’s front-end markup. |
| Footer Meta — Badge Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Footer Meta — Badge Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 60). |
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
What does KPI Tiles with Microcharts actually change on the page?
KPI tiles with a number, delta, and a small sparkline — dashboard-style stats, not a full chart. Inspector labels from this widget’s PHP include “Title”, “Value”, “Value Prefix”, “Value Suffix”.
How do I add KPI Tiles with Microcharts in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “KPI Tiles with Microcharts”, 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
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for KPI Tiles with Microcharts after you activate it.