Setting the LinearGauge Vertically in Angular

Background:

The Wijmo LinearGauge control can display values along a linear scale. By default, gauges are oriented horizontally (left-to-right). However, you can configure the gauge to render vertically by setting its direction property to "Up" or "Down". Additionally, CSS may be needed to ensure the visual layout matches a vertical orientation.

Steps to Complete:

1. Add a LinearGauge to your Angular component.
2. Set the direction property to "Up" or "Down" to orient the gauge vertically.
3. Apply CSS to control the size of the gauge for a vertical appearance.

Getting Started:

Add a LinearGauge to your Angular component

This sets up a basic gauge component bound to Angular properties. The direction attribute controls the direction in which the gauge fills as the value changes.

<!-- app.component.html -->
<wj-linear-gauge
  #gauge
  [min]="0"
  [max]="100"
  [value]="value"
  [direction]="direction">
</wj-linear-gauge>

Set the direction property to "Up" or "Down" to orient the gauge vertically

This Angular code sets the direction property based on user input or logic. To display the gauge vertically, use "Up" or "Down"; for horizontal orientation, use "Left" or "Right".

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import * as gauge from '@mescius/wijmo.gauge';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  value = 25;
  direction: 'Up' | 'Down' | 'Left' | 'Right' = 'Up';

  @ViewChild('gauge') gauge: gauge.LinearGauge;

  setDirection(dir: string) {
    this.direction = dir as any;

    // Optionally adjust element size for vertical alignment
    const el = this.gauge.hostElement.style;
    if (dir === 'Up' || dir === 'Down') {
      el.height = '100%';
      el.width = '2em';
    } else {
      el.height = '2em';
      el.width = '100%';
    }
  }
}

Apply CSS to control the size of the gauge for a vertical appearance

By default, a vertical gauge may not look correct unless the container and gauge host have appropriate height and width. Simple CSS ensures better visual results.

/* app.component.css */
.gauge-container {
  display: flex;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 5em;
}

.wj-lineargauge {
  height: 16em;
  width: 2em;
}

With this Angular setup, the LinearGauge can be displayed vertically by setting its direction property to "Up" or "Down". Combined with simple CSS, this produces a tall, vertical gauge that fills appropriately based on the current value, creating a clear visual indicator in the vertical orientation.

Happy coding!