kendo-chart-tooltip opacity property is not working

4 posts, 0 answers
  1. son
    son avatar
    2 posts
    Member since:
    Apr 2020

    Posted 13 Apr Link to this post

    Hi all,

    I've tried using kendo-chart, when setting Opacity property for tool-tip, it's not working while the javascript version does.

    I've also tried to use inspect element tool in browser to determine what html will be rendered. 

    I recognized that the html code rendered by Angular is not the save as the version rendered by Javascript

    Please be informed.

    Kendo-angular:

    <kendo-chart-tooltip [shared]="true" [border]="{color:'red'}" [opacity]="0.8" >

    </kendo-chart-tooltip>

    kendo-angular-html rendered:

    <kendo-popup class="k-animation-container k-chart-tooltip-wrapper k-animation-container-shown" style="left: 650px; top: 414px;">
    <div class="k-popup">
    <div ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" class="k-chart-shared-tooltip k-chart-tooltip" style="border-color: red; opacity: 0.5; border-width: 1px;">

    Kendo-javascript :

    <script>
    $("#chart").kendoChart({
      series: [{
        data: [1,2,3]
      },{
        data: [1,2,3]
      },{
        data: [1,2,3]
      }],
      tooltip: {
        visible: true,
        shared: true,
        opacity : 0.5
      }
    });
    </script>

    html render

    <div class="k-tooltip k-chart-tooltip k-chart-shared-tooltip" style="position: absolute; opacity: 0.5; border-width: 1px; top: 342px; left: 201px; display: flex;">
    </div>

     

     

  2. Martin
    Admin
    Martin avatar
    146 posts

    Posted 15 Apr Link to this post

    Hi Son,

    Thank you for the provided details.

    In general, Angular and jQuery are quite different technologies. That is why the Kendo controls, built on top of these technologies, are also used in different ways. I tested the opacity option of the shared <kendo-chart-tooltip> in a sample StackBlitz, but it works as expected on my side:

    https://stackblitz.com/edit/angular-qoofsz?file=app/app.component.ts

    If any further questions come up on this case, do not hesitate to write back.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. son
    son avatar
    2 posts
    Member since:
    Apr 2020

    Posted 15 Apr in reply to Martin Link to this post

    Hi Martin,

    I've attach the image , so you guy can see the difference.

     

  4. Martin
    Admin
    Martin avatar
    146 posts

    Posted 15 Apr Link to this post

    Hi Son,

    Thank you for the provided additional details about this case.

    It seems that this is an issue on our side. That is why I logged a bug in our public GitHub repository that can be tracked at the following link:

    https://github.com/telerik/kendo-angular/issues/2846

    As the popup is rendered outside of the Chart, any custom CSS styles can be applied to it. Set the popup background to transparent in order to achieve the desired appearance. Then the background color can be further adjusted by utilizing the [background] option of the <kendo-chart-tooltip>:

    https://stackblitz.com/edit/angular-qoofsz-vpab3l?file=app/app.component.ts  

    As a small token of gratitude for reporting the issue, I have updated your Telerik points.

    Please accept our apologies for the caused inconvenience until the issue is resolved.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top