The Ignite UI for Web Components linear gauge component allows for visualizing data in the form of a linear gauge. The IgcLinearGaugeComponent provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.
Web Components Linear Gauge Example
The following sample demonstrates how setting multiple properties on the same IgcLinearGaugeComponent can transform it to completely different linear gauge.
<!DOCTYPE html><html><head><title>LinearGaugeAnimation</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="options horizontal"><buttonid="animationButton1"class="button1">Gauge Animation #1</button><buttonid="animationButton2"class="button2">Gauge Animation #2</button><buttonid="animationButton3"class="button3">Gauge Animation #3</button></div><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"maximum-value="100"value="50"interval="10"label-interval="10"label-extent="0.0"minorTick-endExtent="0.10"minorTick-start-extent="0.20"tick-start-extent="0.25"tick-end-extent="0.05"tick-stroke-thickness="2"needle-shape="Needle"needle-brush="#79797a"needle-outline="#79797a"scale-stroke-thickness"0"
scale-brush="#ffffff"scale-outline="#d3d3d3"backing-brush="#ffffff"backing-outline="#d1d1d1"backing-stroke-thickness="0" ><igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Dependencies
When installing the Web Components gauge component, the core package must also be installed.
This is the primary measure displayed by the linear gauge component and is visualized as a bar or you can customize it to show almost any shape as is demonstrated below.
<!DOCTYPE html><html><head><title>LinearGaugeNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"is-needle-dragging-enabled="true"needle-shape="Custom"needle-brush="DodgerBlue"needle-outline="DodgerBlue"needle-stroke-thickness="1"needle-breadth="15"needle-inner-extent="0.35"needle-outer-extent="0.65"needle-outer-point-extent="0.8"needle-inner-point-extent="0.325"needle-inner-point-width="0"needle-outer-point-width="0.3"needle-inner-base-width="0"needle-outer-base-width="0.07" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Highlight Needle
The linear gauge can be modified to show a second needle. This will make the main needle's value appear with a lower opacity. To enable this first set highlightValueDisplayMode to Overlay and then apply a highlightValue.
<!DOCTYPE html><html><head><title>LinearGaugeHighlightNeedle</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"maximum-value="100"value="75"interval="10"label-interval="10"label-extent="0.025"labels-pre-terminal="0"labels-post-initial="0"needle-brush="blue"highlight-value-display-mode="Overlay"highlight-value=25is-highlight-needle-dragging-enabled=true></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Ranges
The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state.
<!DOCTYPE html><html><head><title>LinearGaugeRanges</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"rangeBrushes="#a4bd29, #F86232"rangeOutlines="#a4bd29, #F86232"><igc-linear-graph-rangename="range1"start-value="0"end-value="50"inner-start-extent="0.075"inner-end-extent="0.075"outer-start-extent="0.25"outer-end-extent="0.4" ></igc-linear-graph-range><igc-linear-graph-rangename="range2"start-value="50"end-value="100"inner-start-extent="0.075"inner-end-extent="0.075"outer-start-extent="0.4"outer-end-extent="0.55" ></igc-linear-graph-range></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Tick Marks
The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge.
Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties.
Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones.
<!DOCTYPE html><html><head><title>LinearGaugeTickmarks</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"tick-brush="DodgerBlue"ticks-pre-terminal="0"ticks-post-initial="0"tick-stroke-thickness="2"tick-start-extent="0.25"tick-end-extent="0.05"minor-tick-count="4"minor-tick-brush="DarkViolet"minor-tick-end-extent="0.05"minor-tick-start-extent="0.15"minor-tick-stroke-thickness="1"></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>LinearGaugeLabels</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"height="80px"width="100%"minimum-value="0"value="50"maximum-value="100"interval="10"label-interval="10"label-extent="0.025"labels-pre-terminal="0"labels-post-initial="0"font-brush="DodgerBlue"font="11px Verdana" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Backing
The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it.
<!DOCTYPE html><html><head><title>LinearGaugeBacking</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"backing-brush="#bddcfc"backing-outline="DodgerBlue"backing-stroke-thickness="4"backing-inner-extent="0"backing-outer-extent="1"></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Scale
The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using isScaleInverted property) and all labels will be rendered from right-to-left instead of left-to-right.
<!DOCTYPE html><html><head><title>LinearGaugeScale</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-linear-gaugeid="gauge"width="100%"height="80px"minimum-value="0"value="50"maximum-value="100"interval="10"is-scale-inverted="false"scale-brush="DodgerBlue"scale-outline="Red"scale-stroke-thickness="2"scale-inner-extent="0.05"scale-outer-extent="0.65"scale-start-extent="0.05"scale-end-extent="0.95" ></igc-linear-gauge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Summary
For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled.