jqwidgets-framework/demos/Angular/src/bulletchart/settings/app.component.html

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

<jqxBulletChart #myBulletChart style="float: left; margin-left: 10px"
    [width]="350" [height]="80" [barSize]="'40%'" [ranges]="ranges" [ticks]="ticks"
    [title]="'Revenue 2019 YTD'" [description]="'(U.S. $ in thousands)'" [animationDuration]="0"
    [pointer]="pointer" [target]="target" [labelsFormat]="'c'" [showTooltip]="true">
</jqxBulletChart>

<jqxExpander style="float: left; margin-left: 60px"
             [width]="210" [height]="600" [toggleMode]="'none'" [showArrow]="false">

  <div>jqxBulletChart Settings</div>
  <div>
    <div style="padding: 5px">
      <jqxCheckBox #showLabelsCheckbox (onChange)="showLabelsCheckboxChange($event)" [checked]="true">Show Labels</jqxCheckBox>
      <ul style="list-style: none;padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
        <li>
          <jqxRadioButton #nearRadio (onChecked)="nearRadioChecked()" [checked]="false" [groupName]="'position'">Near</jqxRadioButton>
        </li>
        <li>
          <jqxRadioButton #farRadio (onChecked)="farRadioChecked()" [checked]="false" [groupName]="'position'" style="margin-top: 5px">Far</jqxRadioButton>
        </li>
        <li>
          <jqxRadioButton #bothRadio (onChecked)="bothRadioChecked()" [checked]="true" [groupName]="'position'" style="margin-top: 5px">Both</jqxRadioButton>
        </li>
      </ul>
      <br />
      <div>Labels Format:</div>
      <ul style="list-style: none;padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
        <li>
          <jqxRadioButton #currencyRadio (onChecked)="currencyRadioChecked()" [checked]="true" [groupName]="'format'">Currency</jqxRadioButton>
        </li>
        <li>
          <jqxRadioButton #percentRadio (onChecked)="percentRadioChecked()" [checked]="false" [groupName]="'format'" style="margin-top: 5px">Percent</jqxRadioButton>
        </li>
        <li>
          <jqxRadioButton #noneRadio (onChecked)="noneRadioChecked()" [checked]="false" [groupName]="'format'" style="margin-top: 5px">None</jqxRadioButton>
        </li>
      </ul>
      <br />
      <jqxCheckBox #enableAnimationCheckbox (onChange)="enableAnimationCheckboxChange($event)" [checked]="false">Enable Animation</jqxCheckBox>
      <br />
      <div>Pointer Value:</div>
      <jqxSlider #valueSlider (onChange)="valueSliderChange($event)" style="padding-left: 5px"
          [width]="175" [min]="0" [max]="300" [step]="10" [showTicks]="false"
          [mode]="'fixed'" [showButtons]="false" [value]="270">  
      </jqxSlider>
      <br />
      <div>Pointer Color:</div>
      <jqxDropDownList #pointerDropDownList (onChange)="pointerDropDownListChange($event)" 
          [width]="'100%'" [height]="25" [selectedIndex]="4"
          [source]="colorChoices" [autoDropDownHeight]="true">
      </jqxDropDownList>
      <br />
      <div>Target Color:</div>
      <jqxDropDownList #targetDropDownList (onChange)="targetDropDownListChange($event)" 
          [width]="'100%'" [height]="25" [selectedIndex]="4"
          [source]="colorChoices" [autoDropDownHeight]="true">
      </jqxDropDownList>
      <br />
      <jqxCheckBox #disabledCheckbox (onChange)="disabledCheckboxChange($event)" [checked]="false" style="margin-bottom: 5px">Disabled</jqxCheckBox>
      <jqxCheckBox #rtlCheckbox (onChange)="rtlCheckboxChange($event)" [checked]="false">Right-to-Left</jqxCheckBox>
    </div>
  </div>
</jqxExpander>