[Solved] Donut chart title and legend texts not visible on IE or Edge using AngularJS

[Antti]

I'm using donut chart on a page with AngularJS and it works perfectly fine except that on IE and Edge the legend and title texts are not visible at all (see the attachments).

Here is the code for creating the chart options:

01.function createDonutChartOptions() {
02.   $scope.donutChartOptions = {
03.   title: {
04.         visible: true,
05.         position: "top",
06.         font: constants.font,
07.         color: constants.colors.dark,
08.         text: $filter('localization')('Report_Donut_Chart_Title')
09.   },
10.   chartArea: {
11.         background: constants.colors.background
12.   },
13.   tooltip: {
14.         visible: true,
15.         template: "#= category# #= kendo.toString(value,'n2')#%",
16.         font: constants.font
17.   }
18. };
19.};

Here is the code for creating the data series:

01.function createDonutChartDataSeries() {
02.   $scope.donutChartDataSeries = [
03.   {
04.       field: 'percentage',
05.       categoryField: 'categoryName',
06.       visibleInLegendField: 'visibleInLegend',
07.       overlay: {
08.            gradient: "none"
09.       },
10.       labels: {
11.            visible: true,
12.            background: 'transparent',
13.            position: 'outsideEnd',
14.            template: '#=category#',
15.            font: constants.font
16.        }
17.      }
18.    ];
19.};

Here is the code for getting the data for the chart:

01.//Donut data.
02.
03.reportService.getDonutChartDataSource($scope.selectedGroup.key).then(function(donut) {
04.               donut.data.forEach(function (item) {
05.                   if (item.status === constants.donutChartStatuses.finished) {
06.                        item.color = $("#donut-chart-finished").css("color");
07.                   } else {
08.                        item.color = $("#donut-chart-unfinished").css("color");
09.                   }
10.                });
11.                createDonutChartDataSeries();
12.                createDonutChartOptions();
13.                var newHeight = donut.data.length * 100;
14.                $scope.donutChartDataSource = new kendo.data.DataSource({
15.                        data: donut.data,
16.                        group: {
17.                            field: "pathId"
18.                        }
19.                });
20.                $scope.isDonutChartReady = true;
21.                if (newHeight >= 100) $("#donut-chart").css({ "height": newHeight });
22.                    $timeout(function () {
23.                        $scope.donutChart.redraw();
24.                    }, 200);
25.                });

Here is the HTML code:

01.<div class="col-md-6" ng-show="isDonutChartReady">
02.     <div kendo-chart="donutChart"
03.          k-legend="{ position: 'bottom' }"
04.          k-series-defaults="{ type: 'donut', startAngle: 270 }"
05.          k-options="donutChartOptions"
06.          k-series="donutChartDataSeries"
07.          k-data-source="donutChartDataSource"
08.          class="report-donut-chart" id="donut-chart"></div>
09.</div>

I can't understand what I'm doing wrong.

Could you please help me out?

[Antti]

It seems that the text renders properly, but I still have no idea why it is not visible (see the attachment).

 

[Antti]

I found the solution. For some reason the line height parameter on css was set to 0 and for some reason it didn't have any affect on Chrome or Firefox.

[Veselin Tsvetanov]

Hi Antti,

Thank you for getting back to us and letting us know about the cause for the observed issue.

Regards,
Veselin Tsvetanov
Telerik