Native gauge chart¶
Native gauge charts are lightweight data visualization elements that represent one or more values as a position on a radial arc scale. Unlike the ECharts-based gauge chart, they require no third-party charting library, making them ideal for performance-sensitive or bundle-size-constrained applications.
Usage¶
T.B.D
Design¶
T.B.D
Code¶
Usage¶
import { SiNChartGaugeComponent } from '@siemens/native-charts-ng/gauge';
@Component({
imports: [SiNChartGaugeComponent, ...]
})
Sum mode¶
Multiple series arcs are stacked on the gauge ring. The center shows their combined total.
Single mode¶
A single arc covers the ring. Colored background segments can be layered beneath the arc to indicate qualitative ranges.
SiNChartGaugeComponent API Documentation¶
selector
si-nchart-gaugeInput Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| axisLabelFormatter ¶ | (val: number) => string | Custom formatter for axis labels. Takes precedence when specified, i.e. number of decimals needs to be set by the user using this formatter. | |
| axisNumberOfDecimals ¶ | number | 0 | Number of decimals on the axis. Possible values are from 0 to 100. |
| endAngle ¶ | number | 90 | End angle in degrees |
| legendPosition ¶ | ("row" | "column") | 'row' | Legend position: - column : chart and legend form a column, i.e. the legend is below the chart. The chart size is driven by the available width. - row : chart and legend form a row, i.e. the legend is besides the chart. The The chart size is driven by the available height. |
| max ¶ | number | 100 | Max value, can be negative |
| maxNumberOfDecimals ¶ | number | 2 | Max number of decimals. Possible values are from 0 to 100. |
| min ¶ | number | -100 | Min value, can be negative |
| minNumberOfDecimals ¶ | number | 0 | Min number of decimals. Possible values are from 0 to 100. |
| mode ¶ | ("sum" | "single") | 'sum' | Display mode: sum to sum up multiple series or single for a single value with optional segmented display. |
| segments ¶ | GaugeSegment[] | [] | Colored segments. |
| series ¶ | GaugeSeries[] | [] | The series for the chart. |
| showLegend ¶ | boolean | true | Whether to show the legend |
| showRangeLabelsOutside ¶ | boolean | false | Whether to show range start/end labels on the outside of the ring |
| showTicks ¶ | boolean | true | Whether to show ticks |
| startAngle ¶ | number | -90 | Start angle in degrees |
| unit ¶ | string | '' | Unit |
| valueFormatter ¶ | (val: number) => string | Custom formatter for value. Takes precedence when specified, i.e. number of decimals needs to be set by the user using this formatter. |
Types Documentation¶
| One segment of the gauge chart. The first segment starts at the min value of the gauge chart and ends at endValue . | |||
|---|---|---|---|
|
| One series of the gauge chart. | ||||||
|---|---|---|---|---|---|---|
|
Except where otherwise noted, content on this site is licensed under MIT License.