Setting the LinearGauge Vertically in Vue

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 Vue 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 Vue component

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

<template>
  <div class="gauge-container">
    <wj-linear-gauge
      ref="gauge"
      :min="0"
      :max="100"
      :value="value"
      :direction="direction"
    />
  </div>
</template>

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

Vue data and methods are used to control the gauge orientation. To display the gauge vertically, set direction to "Up" or "Down"; for horizontal orientation, use "Left" or "Right".

<script>
import { WjLinearGauge } from '@mescius/wijmo.vue2.gauge';

export default {
  components: { WjLinearGauge },
  data() {
    return {
      value: 25,
      direction: 'Up'
    };
  },
  methods: {
    setDirection(dir) {
      this.direction = dir;

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

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

A vertical gauge typically requires explicit height and width to appear correctly. CSS ensures the gauge looks tall and narrow rather than stretched horizontally

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

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

With this Vue 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 correctly based on the current value, providing a clear vertical indicator.

Happy coding!