Rank Chart

<tx-rank-chart    [series]="series"    rankLabel="Position"    ariaLabel="Search positions for “running shoes”"  />

<div class="wrap">  <tx-rank-chart    [series]="series"    [maxRank]="10"    [height]="300"    rankLabel="Position"    ariaLabel="Position of the pricing page"    (pointClick)="clicked.set($event)"  />  <tx-message severity="secondary" size="small">    @if (clicked(); as point) {      {{ point.name }}: position {{ point.rank }}{{ point.note ? ' — ' + point.note : '' }}    } @else {      Click a point.    }  </tx-message></div>

<tx-rank-chart  [series]="series"  showLegend  legendPosition="bottom"  legendVariant="pill"  [height]="340"  ariaLabel="Positions by keyword"/>

<div class="wrap">  <tx-select class="control" ariaLabel="Depth" [options]="depths" [(ngModel)]="depth" />  <tx-rank-chart    [series]="series"    [maxRank]="depth()"    [height]="320"    ariaLabel="Weekly position"  /></div>

<div class="wrap">  <div class="legend">    @for (item of series; track item.name; let index = $index) {      <tx-tag [value]="item.name" [style.--dot]="item.color ?? color(index)" class="item" />    }  </div>  <tx-rank-chart    [series]="series"    [maxRank]="10"    [height]="280"    ariaLabel="Our site against rivals"  /></div>

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="series.set([])"></button>  </div>  <tx-rank-chart    [series]="series()"    [loading]="loading()"    [maxRank]="10"    [height]="260"    ariaLabel="Position"  /></div>

<tx-rank-chart  [series]="series"  [maxRank]="10"  [height]="280"  [dt]="{    rankLine: {      strokeWidth: '4',      markerRadius: '5',      markerHoverRadius: '8',      color1: 'var(--tx-purple-500)',      color2: 'var(--tx-amber-500)',    },  }"  ariaLabel="Positions"/>

<tx-rank-chart  [series]="series"  [maxRank]="10"  [height]="260"  [pt]="{ line: { style: { strokeDasharray: '6 4' } } }"  ariaLabel="Forecast position"/>