A Gauge chart (or speedometer chart) combines a Donut chart and a Pie chart in a single chart.
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
On the Content tab of the Gauge Chart Elementor widget, you can manage the grid and graph settings, edit the title and description.
Title settings
- Show title – the toggle to enable/disable the display of the title on the current chart.
- Title – the field to input a title text.
Description settings
- Show description – the toggle to enable/disable the display of the description on the current chart.
- Description – the field to input a description text.
- Show description after title – the toggle allows you to display the description after the title or if it off – after the graph.
Chart value list
Section for creating new blocks on the chart. When creating a new item, you can specify the value, label name, background and manage other options.
Chart Settings
- Chart сonventions – the toggle to enable/disable the display of the chart сonventions on the current chart.
- Show legend results as a percentage – the toggle to enable/disable the display of values as a percentage in the chart conventions. The option is available if the Chart сonventions toggle is enabled.
- Title graph сonventions – the field to input text for a chart сonventions title. Leave the field blank to display the chart сonventions without a title. The option is available if the Chart сonventions toggle is enabled.
- Show labels – the toggle to enable/disable the display of the labels on the current chart. If the graph contains many sections, the labels display may add a mess to the graph.
- Outside the chart – the toggle to manage the placement of labels on the chart. They can be inside or outside of the pie. The option is available if the Show labels toggle is enabled.
- Labels offset– select label offset value. The option is available if the Outside the chart toggle is enabled.
- Show results in numbers – the toggle to enable/disable the display of label together with a numerical value. The option is available if the Show labels toggle is enabled.
- Unit of measurement – enter the unit measurements for your numerical values. The option is available if the Show results in numbers toggle is enabled.
- Show results as a percentage – the toggle to enable/disable the conversion of values as a percentage. The option is available if the Show labels toggle is enabled.
Donut settings
- Donut width – specify the donut width for all devices or separately for desktops, tablets or phones
- Show animation – the toggle to enable/disable the animation for the current chart.
- Speed animation – specify the speed animation for the existing graph appearance. The option is available if the Show animation toggle is enabled.
Gauge settings
- Start angle – specify the angle to start building the chart.
- Total – specify the percentage of hiding the second semicircle of the chart.
Style Tab
On the styles tab, you can configure everything related to the visual style of the Gauge Chart title, description, and conventions elements: colors, typography, alignment, margins, and more.
Header
- Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
- Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Color – Specify the font color and opacity for the text of the current block using the color picker.
- Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
- Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.
Description
- Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
- Color – Specify the font color and opacity for the text of the current block using the color picker.
- Alignment – manage the alignment( justify, left, center, right ) of block text for desktop, tablet or mobile.
- Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.
Conventions
- Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
- Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Color – Specify the font color and opacity for the text of the current block using the color picker.
- Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
- Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.
List conventions
- Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
- Color – Specify the font color and opacity for the text of the current block using the color picker.
- Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
- Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.
Labels
- Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
- Color – specify the font color and opacity for the text of the labels using the color picker.
Advanced Tab
The settings in the advanced tab Worker Elementor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.