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

4 posts, 0 answers
  1. Antti
    Antti avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 May Link to this post

    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?

  2. Antti
    Antti avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 May in reply to Antti Link to this post

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

     

  3. Kendo UI is VS 2017 Ready
  4. Antti
    Antti avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 May Link to this post

    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.
  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 31 May Link to this post

    Hi Antti,

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

    Regards,
    Veselin Tsvetanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready