Overview

d3 Speedometer shows any numeric value as an animated, speedometer-style gauge. Built on the popular react-d3-speedometer library, it draws a semi-circular dial split into coloured segments, with a needle that smoothly moves to the current value whenever it changes.

What makes this widget different is that every setting is bound to an attribute of your entity. The value, range, colours, segments, labels and even the needle animation can all be changed at runtime from a microflow, nanoflow or input field, without redesigning the page. One widget can therefore serve many dashboards, each with its own look.

Features

- Value, minimum and maximum bound to Integer attributes

- Any number of segments, with automatic colour gradient from a start colour to an end colour

- Custom colour per segment, as a simple comma-separated list

- Unequal segments at custom stop values, for thresholds such as red / amber / green zones

- Custom segment labels (text, colour, font size, inside or outside the ring) defined as JSON

- Current value text with a placeholder, for example "Speed: ${value} km/h"

- Value formatting with d3-format patterns, such as whole numbers, decimals or thousands separators

- 29 needle animation styles (linear, bounce, elastic and more), with adjustable duration and needle length

- Fixed width and height in px, em, cm and other units, or fluid width that fills its container

- Adjustable ring width, padding, text colour, font sizes and font weight

- Accessible: set an aria-label that screen readers announce

Documentation

Typical usage scenario

Use d3 Speedometer when users need to read one number at a glance and see right away whether it is good, average or critical. The widget shows the value as an animated speedometer gauge with coloured zones, so a meaning like "in the red" or "in the green" is clear without reading a table or a chart.

Common uses:

- KPI dashboards: performance scores, SLA compliance, sales against target, completion percentage.

- IoT and device monitoring: live speed, temperature, pressure, fuel or battery level.

- Quality and risk indicators: risk scores, customer satisfaction, error rates, shown against red / amber / green thresholds.

- Progress and capacity: storage usage, workload, occupancy.

Every setting is bound to an attribute, so one page can show gauges with different ranges, thresholds and colours per object, and they can change at runtime from microflows or nanoflows.

Features and limitations

Features

- Value, minimum and maximum bound to Integer attributes; the needle animates when the value changes.

- Any number of segments, with an automatic colour gradient from a start colour to an end colour.

- A custom colour for each segment (comma-separated list).

- Unequal segments at custom stop values, for thresholds.

- Custom segment labels (text, colour, font size, inside or outside the ring) defined as JSON.

- Value text with a placeholder, for example Speed: ${value} km/h.

- d3-format patterns for number formatting (whole numbers, decimals, thousands separators).

- 29 needle animation styles, with adjustable duration and needle length.

- Fixed size in px, em, ex, in, cm, mm, pt or pc, or a fluid width that fills its container.

- Adjustable ring width, padding, text colour, font sizes and font weight.

- An accessible aria-label for screen readers.

- Works in offline-capable web apps.

Limitations

- Web only; not available for native mobile apps.

- Value, minimum and maximum are Integer attributes; decimal values are not supported for them.

- Values of 0 or below are ignored and replaced by the default, so negative ranges (for example -50 to 50) are not possible.

- Every property must be bound to an attribute; you cannot type a fixed value in the widget properties.

- Segment colours, stops and labels are entered as text (comma-separated lists or JSON), not with a visual editor.

Dependencies

- Mendix Studio Pro 10.24.17 or a later 10.24 version.

Installation

1. Download mendix.Speedometer.mpk from the Marketplace, or from the GitHub release Version1.0.1.

2. Copy it into the widgets folder of your app (App > Show App Directory in Explorer).

3. In Studio Pro, press F4 (App > Synchronize App Directory).

4. The Speedometer widget now appears in the Toolbox.

Configuration

1. Create an entity with an Integer attribute for the value. Add attributes for any other settings you want to control, for example Integer attributes for minimum, maximum and segments, and String attributes for colours.

2. Place the Speedometer widget inside a data view, list view or snippet that has this entity as its context.

3. Open the widget properties and select an attribute for each setting you need. Properties are grouped into tabs: General, Dimensions, Segments, Colors, Needle, Labels.

4. Leave a property empty to use its default: range 0–1000, 5 segments, colours #FF471A to #33CC33, width and height 300 px, needle transition easeQuadInOut (500 ms).

Value formats for text properties

- Segment colours: #FF471A,#F6961E,#ECDB23,#AEE228,#6AD72D (no spaces)

- Custom segment stops: 0,500,800,1000 (must start at the minimum and end at the maximum)

- Custom segment labels:

[{"text":"Low","position":"Inside"},{"text":"Medium","position":"Inside"},{"text":"High","position":"Outside","color":"#C00000"}]

- Value text: Current speed: ${value} km/h

Known bugs

None

Report to https://github.com/bharathidas/d3_speedometer/issues

Frequently Asked Questions

Can I set a fixed value without creating an attribute?

No. Every property is bound to an attribute. Give the attribute a default value in the domain model if it never changes.

Why doesn't my gauge start at a negative number?

Values of 0 or below are ignored for the minimum, so negative ranges are not supported.

How do I show a unit such as km/h or %?

Set currentValueText to something like ${value} km/h.

How do I make the gauge fill its container?

Set fluidWidth to true. Width and height are then ignored.

How do I create red / amber / green zones?

Use customSegmentStops (for example 0,600,850,1000) together with segmentColors (for example red,orange,green).

Do my existing 1.0.0 widgets need to be reconfigured?

No. The widget definition is unchanged, so all settings are kept after the upgrade.

Does it work on native mobile?

No, it is for web profiles only.