jqwidgets-framework/demos/Angular/src/gauge/lineargauge/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxLinearGauge #myLinearGauge style="margin-left: 20px; float: left;"
    [max]="60" [value]="-60" [pointer]="pointer"
    [colorScheme]="'scheme05'" [orientation]="'vertical'"
    [labels]="labels" [ticksMajor]="ticksMajor"
    [ticksMinor]="ticksMinor" [ranges]="ranges">
</jqxLinearGauge>

<div style="margin-left: 330px">
  <jqxExpander [width]="280" [height]="320" [toggleMode]="'none'" [showArrow]="false">
    <div className='demo-options-header'>Options</div>
    <div>
      <jqxCheckBox (onChange)="isVerticalCheckboxOnChange($event)" [checked]="true">Is Vertical</jqxCheckBox>
      <br />
      <div>
        <table style="float: left; margin-left: 10px">
          <tbody>
            <tr>
              <td>Labels position:</td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="labelsNearRadioOnChecked()" [groupName]="'labels-position'">Near</jqxRadioButton>
              </td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="labelsFarRadioOnChecked()" [groupName]="'labels-position'">Far</jqxRadioButton>
              </td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="labelsBothRadioOnChecked()" [groupName]="'labels-position'" [checked]="true">Both</jqxRadioButton>
              </td>
            </tr>
          </tbody>
        </table>
        <table style="float: right; margin-right: 10px">
          <tbody>
            <tr>
              <td>Ticks position:</td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="ticksNearRadioOnChecked()" [groupName]="'ticks-position'">Near</jqxRadioButton>
              </td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="ticksFarRadioOnChecked()" [groupName]="'ticks-position'">Far</jqxRadioButton>
              </td>
            </tr>
            <tr>
              <td>
                <jqxRadioButton (onChecked)="ticksBothRadioOnChecked()" [groupName]="'ticks-position'" [checked]="true">Both</jqxRadioButton>
              </td>
            </tr>
          </tbody>
        </table>
        <div style="clear: both"></div>
      </div>
      <br />
      <jqxCheckBox (onChange)="showTicksCheckboxOnChange($event)" [checked]="true">Show Ticks</jqxCheckBox>
      <jqxCheckBox (onChange)="showLabelsCheckboxOnChange($event)" [checked]="true">Show Labels</jqxCheckBox>
      <jqxCheckBox (onChange)="showRangesCheckboxOnChange($event)" [checked]="true">Show Ranges</jqxCheckBox>
      <jqxCheckBox (onChange)="showBackgroundCheckboxOnChange($event)" [checked]="true">Show Background</jqxCheckBox>
      <br />
      <jqxButton style="margin-left: 90px; text-align: center" (onClick)="showAnimationButtonOnClick()" [width]="100" [height]="25">Reset Value</jqxButton>
    </div>
  </jqxExpander>
</div>