Kendo Angular Donut Chart styling appears to switch randomly

Question

I am currently working on a Kendo UI donut chart in an Angular project. The chart works great functionally, but the styling of the chart is giving me some trouble.

Right now, the chart keeps switching between two kinds of styles.

This is the first one: Preferred styling

This is the second one: Non-preferred styling

These seem to change at random whenever I reload, even when nothing in the code is changed. I have been trying to find a solution for hours, but can't seem to get anything working.

Here is the code for the chart:

 <div *ngIf="isDonutEnabled && pieGraphData">
    <kendo-chart class="travelbehaviour-graph-donut-spacing">
      <kendo-chart-legend [visible]='false' position="bottom" orientation="horizontal"></kendo-chart-legend>
      <ng-template kendoChartDonutCenterTemplate>
        <span class="travelbehaviour-graph-donut-center-subtext">CO₂ Uitstoot</span>
        <span class="travelbehaviour-graph-donut-center-bigtext">{{pieGraphData.co2}}</span>
        <span class="travelbehaviour-graph-donut-center-subtext">g/km</span>
      </ng-template>
      <kendo-chart-series>
        <kendo-chart-series-item *ngIf="includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
          [holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionIncluding">
          <kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
        <kendo-chart-series-item *ngIf="!includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
          [holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionExcluding">
          <kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  </div>

Here is the relevant CSS:

.travelbehaviour-graph-donut-spacing {
    height: 50vh;
    width: 50vw;
    margin: 0 auto;
}

.travelbehaviour-graph-donut-center-bigtext {
  font-family: PublicaSansMedium;
  font-size: 50px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #333333;
}

.travelbehaviour-graph-donut-center-subtext {
  font-family: PublicaSansMedium;
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #333333;
}

I have already tried using ViewEncapsulation.None, which didn't work. I also tried changing the CSS of the graph, but that didn't work either.

The *ngIf variables are a boolean and a data object used to load data into the graph.

So far I have found very little concerning this problem and was wondering if anyone could help me out with this problem - it would be very much appreciated!

EDIT: It's worth noting that this also happens to another chart in my project on the same page: a stacked column chart. This has exactly the same problem as described above.

VBartels VBartels · Accepted Answer · 2020-04-06T13:01:53

I'm closing this question since I found a solution for my problem. Apparently, the glass-look is a styling feature that can be turned on or off, with other settings included as well. More can be found here: https://www.telerik.com/kendo-angular-ui/components/charts/api/Overlay/

This had to be set for every relevant series-item in order to work.

Kendo Angular Donut Chart styling appears to switch randomly

2 Answers