Kendo Angular Donut Chart styling appears to switch randomly - html

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.

Answer 1

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.

Answer 2

The problem looks like it is random, but it isn't.
I assume you use Google Chrome, because we faced the problem as well.
The problem is that the chart is rendered before your css file is loaded.
This happens in Chrome because js files are cached in memory and css files are cached on disk.
Our current workaround is to to render the chart after all data is loaded (needs mostly longer than 1 second to load the data from the server).
This is probably not a satisfying solution, but I hope you were able to understand the problem a bit better.
We have also opened a Kendo ticket, and I will let you know as soon as we find a better solution.
EDIT:
Kendo support replied that they were not aware of this problem, but they are currently implementing a solution. For the fonts, they recommend that the font should be set via the font property of the the labels of the proper Chart element. They also opened a feature request so set the font globally.