Donut charts series item size different based on data.. how to make it constant size ?

2 Answers 404 Views
Charts
Ravi
Top achievements
Rank 1
Iron
Ravi asked on 30 Apr 2021, 04:34 PM | edited on 30 Apr 2021, 04:34 PM

I have two donut charts displayed side by side .. and even though I set the height of the chart area to be same.. the actual chart series coming different height .. how to make it same.. It is in Angular Kendo UI.. Following in my code of the component

fyi: I added the image as well how they look as an attachment

 

    <kendo-chart
      [transitions]="false"
      (seriesHover)="onSeriesHover($event)"
      (seriesClick)="onSeriesClick($event)" >
      <kendo-chart-area background="transparent" [height]="height">
        <kendo-chart-legend [visible]="false">
        </kendo-chart-legend>
        <kendo-chart-title [text]="header"></kendo-chart-title>
        <kendo-chart-series style="cursor: pointer">
          <kendo-chart-series-item
            [autoFit]="true"
            type="donut" [data]="data"
            categoryField="name" field="value" colorField="color" >
            <kendo-chart-series-item-labels
              position="outsideEnd"
              color="#000"
              background="transparent"
              [content]="labelContent">
            </kendo-chart-series-item-labels>
            <kendo-chart-series-item-tooltip format="pie" padding="2">
              <ng-template let-category="category" let-dataItem="dataItem">
                {{category}} ({{dataItem.value}})
              </ng-template>
            </kendo-chart-series-item-tooltip>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart-area>
    </kendo-chart>


2 Answers, 1 is accepted

Sort by
0
Ravi
Top achievements
Rank 1
Iron
answered on 30 Apr 2021, 05:47 PM
It has to do with my labels.. Once I had it consistent, and display only count and not the text.. But is there a way to keep the actual chart size same 
0
Dimiter Madjarov
Telerik team
answered on 03 May 2021, 06:18 AM

Hello Ravi,

I've covered the question in the support thread on the same topic. I believe the reason for the observed behaviour is that the autoFit option of the series is set to true

https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/#toc-autofit

It is used to guarantee that the content of the Chart labels won't be clipped by scaling down the chart if needed. In order to have the same size applied to the two Donut charts, you could either set the autoFit option to false (however this might lead to clipped labels) or increase the size of the Chart area to ensure that there will be more real estate to safely visualise the labels.

I hope this information helps. Let me know if I could provide further assistance.

Regards,
Dimiter Madjarov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Charts
Asked by
Ravi
Top achievements
Rank 1
Iron
Answers by
Ravi
Top achievements
Rank 1
Iron
Dimiter Madjarov
Telerik team
Share this question
or