kendo-chart-tooltip opacity property is not working

[son]

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>

 

 

[Martin]

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

[son]

Hi Martin,

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

 

[Martin]

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