diff --git a/docs/components/charts/native-gauge-chart.md b/docs/components/charts/native-gauge-chart.md new file mode 100644 index 0000000000..f84fbbf79d --- /dev/null +++ b/docs/components/charts/native-gauge-chart.md @@ -0,0 +1,39 @@ +# 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](gauge-chart.md), 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 + +```ts +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. + + + + + + diff --git a/mkdocs.yml b/mkdocs.yml index bf75432c21..43fd4578bd 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -177,6 +177,7 @@ nav: - Scatter chart: 'components/charts/scatter-chart.md' - Generic chart: 'components/charts/generic-chart.md' - Micro charts: 'components/charts/micro-charts.md' + - Native gauge chart: 'components/charts/native-gauge-chart.md' - Maps: 'components/maps/maps.md' - Pages: - About: 'components/pages/about.md'