Authors:Zhicheng Wang

• html
• ts
• scss
• spec.ts

<svg height="300" viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg">
  <g *ngFor="let pie of chart.pies; let index = index" [attr.index]="index" class="chart">
    <path [d]="pie.path" [stroke-width]="gutter"
          class="serial"></path>
    <g [transform]="translateOf(pie)" class="markup">
      <circle r="5"></circle>
      <text dy="2">{{chart.serials[index]}}</text>
    </g>
  </g>
</svg>
<p>
  <label>
    <span i18n>cx</span>
    <input type="number" [(ngModel)]="chart.cx" step="1">
  </label>
  <label>
    <span i18n>cy</span>
    <input type="number" [(ngModel)]="chart.cy" step="1">
  </label>
</p>
<p>
  <label>
    <span i18n>radius</span>
    <input type="number" [(ngModel)]="chart.radius" step="1">
  </label>
  <label>
    <span i18n>gutter</span>
    <input type="number" [(ngModel)]="gutter" step="0.5">
  </label>
  <label>
    marker offset
    <input type="number" [(ngModel)]="noteOffset" step="5">
  </label>
</p>