Set kendo-chart-tooltip position

[Smail]

How to set the position of the chart tooltip. the problem is that the tooltip is shown by default next the cursor (on the right), so when we move to the right the mouse will be on the tooltip thus the value will not be changed

Thanks

<kendo-chart>
...
<kendo-chart-tooltip >
  <ng-template kendoChartSharedTooltipTemplate>
   ..
  </ng-template>
</kendo-chart-tooltip>
</kendo-chart>

 

[Stoyan]

Hi Smail,

Thanks for the provided information.

The position of the Kendo Chart Tooltip can be set by tweaking the CSS classes of the tooltip.

1. If you wish to apply positional changes to the tooltip, then the wrapper of the tooltip can be targeted - .k-chart-tooltip-wrapper
2. If you wish to apply cosmetic changes to the content of the tooltip the  .k-chart-tooltip CSS class can be targeted.

I've prepared a short StackBlitz demo demonstrating the above suggestions:

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

I hope this sheds some light on the matter.

Regards,
Stoyan
Progress Telerik

[Christian]

The .k-chart-tooltip renders around the kendoChartSeriesTooltipTemplate and setting the tooltip style background-color automatically based on the series.color. This makes us unable to define custom logic how to render the background color. As shown in the image:

What I'm looking for is when I hover over the dot to show the tooltip but I have my own background color which manage to have in data.

Is there a way to disable the setting of color for k-chart-tooltip? So we can achieve following result:

 

[Stoyan]

Hello Christian,

Thanks for the provided information.

The kendo-chart-tooltip provides the developer with inputs for css styling. For example, if one wants to change the background with a custom color, It can be done through the background input.

I've created a StackBlitz demo which demonstrates the said above:

https://stackblitz.com/edit/angular-ynirkc?file=src%2Fapp%2Fapp.component.ts

I hope this information helps.

Regards,
Stoyan
Progress Telerik