Kendo UI Donut chart with rounded ended

[Jordan]

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.

My working stackblitz of the jQuery donut is here: https://stackblitz.com/edit/web-platform-szmuv9

My Angular version that I am trying to work on is here:

https://stackblitz.com/edit/angular-bi2dsw

My app.component.ts:

@Component({
selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate
                       let-value="value" let-category="category" let-series="series">
              {{ category }} ({{ series.name }}): {{ value }}%
          </ng-template>
        </kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let series of model; let outermost = last;"
                                   type="donut" [startAngle]="90"
                                   [holeSize]="60" [margin]="10"
                                   [name]="series.name" [data]="series.data"
                                   field="value" categoryField="category" colorField="color">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `,
})

the tempdata.ts file:

export const tempdata = [
  {
    data: [
      {
        category: 'demand',
        value: '75%',
        color: '#009a8c',
      },
      {
        category: 'late',
        value: '25%',
        color: '#e31b23',
      },
    ],
  },
  {
    data: [
      {
        category: 'All',
        value: 500,
        color: '#065aa3',
      },
    ],
  },
];

I am going through your API references as well (https://www.telerik.com/kendo-angular-ui/components/drawing/api/), but haven't had much luck.  Can anyone help point me in the right direction?

[Yanmario]

Hi Jordan,

It seems that this question was already asked and answered in a private support thread that you received a carbon copy of the contents. For public knowledge, I will provide the answer from the private ticket here.

In general, the Kendo UI for jQuery charts can be "translated" to equivalent Kendo UI for Angular versions (sometimes with minor adjustments) as described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/charts/convertion-jquery-charts/

The templates are incompatible, and depending on the Chart element, either the "content" callback, the "format" option or a regular Angular template can be used.

The following example demonstrates a sample approach to convert the provided customized chart from jQuery to Angular:

https://stackblitz.com/edit/angular-mepsdx-e22wqq?file=app/app.component.ts

Further helpful details about the Kendo UI for Angular Charts configuration is available in the respective documentation and API sections, e.g.:

https://www.telerik.com/kendo-angular-ui-develop/components/charts/chart/configuration/

https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/

https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels/

https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series/

https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/LegendLabels/#toc-content

etc.

If any further questions arise, please continue the conversation in the private thread to avoid any possible confusion. Thank you.

Regards,
Yanmario
Progress Telerik