How to Set Wijmo LinearGauge Vertically

You may have noticed after importing a LinearGauge and adding it to your app that the default direction is to the right. The gauge can actually be set in multiple directions: "Right" "Left" "Up" "Down". This can be achieved by adding the direction property to your LinearGauge.

<div className="gaugeHolder">
   <wjGauge.LinearGauge
      min={0}
      max={100}
      value={25}
      direction={"Up"}
    />
</div>

Setting the Gauge Vertically

To set the gauge vertically, you need to set the direction property to either "Up" or "Down". Doing this will change the direction of values in your gauge to either start from the top or bottom of the gauge. However, the default styling of the gauge fills the area that contains it and looks like this:

To have the vertical gauge appearance that is anticipated, CSS styling is needed for both the gauge and the element that contains it:

.gaugeHolder {
  display: flex;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 5em;
}

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

Hope you found this article helpful in setting up your Linear Gauge!

Happy coding.