title: Kendo UI Angular Donut Chart Rounded Corners
body: <p>I have a donut chart with rounded ends in Kendo UI for jQuery running exactly as the client wants.  However, I need this to be using Kendo UI for Angular instead.  I believe this is supported if I use Drawing Visuals,  but I can't figure out how to port over what I have for my jQuery version into the Angular version.</p>
  <p>My working stackblitz of the jQuery donut is here:
  <a href="https://stackblitz.com/edit/web-platform-szmuv9" rel="nofollow noreferrer">https://stackblitz.com/edit/web-platform-szmuv9</a></p>
  <p>My jQuery version with the rounded ends are here:
  <a href="https://web-platform-szmuv9.stackblitz.io/" rel="nofollow noreferrer">https://web-platform-szmuv9.stackblitz.io/</a></p>
  <p>my angular version is here:
  <a href="https://stackblitz.com/edit/angular-bi2dsw" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-bi2dsw</a></p>
  <p>appcomponent.ts</p>
  <pre><code>@Component({
  selector: 'my-app',
    template: `
        &lt;kendo-chart&gt;
          &lt;kendo-chart-legend [visible]=&quot;false&quot;&gt;&lt;/kendo-chart-legend&gt;
          &lt;kendo-chart-area background=&quot;none&quot;&gt;&lt;/kendo-chart-area&gt;
          &lt;kendo-chart-tooltip&gt;
            &lt;ng-template kendoChartSeriesTooltipTemplate
                         let-value=&quot;value&quot; let-category=&quot;category&quot; let-series=&quot;series&quot;&gt;
                {{ category }} ({{ series.name }}): {{ value }}%
            &lt;/ng-template&gt;
          &lt;/kendo-chart-tooltip&gt;
          &lt;kendo-chart-series&gt;
            &lt;kendo-chart-series-item *ngFor=&quot;let series of model; let outermost = last;&quot;
                                     type=&quot;donut&quot; [startAngle]=&quot;90&quot;
                                     [holeSize]=&quot;60&quot; [margin]=&quot;10&quot;
                                     [name]=&quot;series.name&quot; [data]=&quot;series.data&quot;
                                     field=&quot;value&quot; categoryField=&quot;category&quot; colorField=&quot;color&quot;&gt;
            &lt;/kendo-chart-series-item&gt;
          &lt;/kendo-chart-series&gt;
        &lt;/kendo-chart&gt;
      `,
  })
  </code></pre>
  <p>The tempdata.ts</p>
  <pre><code>export const tempdata = [
    {
      data: [
        {
          category: 'demand',
          value: '75%',
          color: '#009a8c',
        },
        {
          category: 'late',
          value: '25%',
          color: '#e31b23',
        },
      ],
    },
    {
      data: [
        {
          category: 'All',
          value: 500,
          color: '#065aa3',
        },
      ],
    },
  ];
    
  </code></pre>