Bullet Chart

import { Component } from '@angular/core';
import { WrBulletChart } from 'ngwr/charts/bullet-chart';

@Component({ imports: [WrBulletChart] })
export class MyComponent {}

<wr-bullet-chart
  label="Revenue"
  subLabel="USD, thousands"
  [value]="270"
  [target]="250"
  [ranges]="[150, 225, 300]"
/>

@for (kpi of kpis; track kpi.label) {
  <wr-bullet-chart
    style="--wr-bullet-chart-label-width: 7rem"
    [label]="kpi.label"
    [subLabel]="kpi.subLabel"
    [value]="kpi.value"
    [target]="kpi.target"
    [ranges]="kpi.ranges"
  />
}

<!-- Ends at 300, the largest of the three -->
<wr-bullet-chart label="Default" [value]="270" [target]="250" [ranges]="[150, 225, 300]" />

<!-- A fixed end: 270 is drawn to it -->
<wr-bullet-chart label="max 250" [value]="270" [target]="200" [ranges]="[150, 225, 300]" [max]="250" />

<!-- Below zero: the bar runs from -20 up to zero -->
<wr-bullet-chart label="Margin" subLabel="%" [value]="-20" [target]="10" [ranges]="[0, 20, 40]" />

<wr-bullet-chart label="Revenue" [value]="270" [target]="250" [ranges]="[150, 225, 300]" [valueFormat]="format" />

const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact' });

// The figures are thousands: 270 reads "$270K".
format = (value: number): string => usd.format(value * 1000);

<!-- No value yet: no bar, and the name says so -->
<wr-bullet-chart label="Revenue" [value]="null" [target]="250" [ranges]="[150, 225, 300]" />

<!-- No target: no marker -->
<wr-bullet-chart label="Revenue" [value]="270" [ranges]="[150, 225, 300]" />