kendo-chart-series-item-tooltip width

2 posts, 0 answers
  1. alex
    alex avatar
    15 posts
    Member since:
    Nov 2020

    Posted 18 Dec 2020 Link to this post

    How can I set the size of the popup?
    I would like the popup to be for example 400px
    and the elements inside will then adapt to the size of the popup

    Something like this:

    <kendo-chart-series-item-tooltip width="400px">
                <ng-template>
                             <span>Mypopup</span>
                </ng-template>
    </kendo-chart-series-item-tooltip>

     

    The element that a css class must have for this problem I think is k-popup

     

  2. Hetali
    Admin
    Hetali avatar
    73 posts

    Posted 20 Dec 2020 Link to this post

    Hello Alex,

    In order to change the width of the tooltip in the Kendo UI Chart, use the following CSS snippet:

    .k-popup .k-chart-tooltip {
      width: 400px;
    }

    In this StackBlitz example, the tooltip content adapts to the size of the tooltip in the Kendo UI Chart. Please make sure to set the encapsulation to ViewEncapsulation.None to set the style locally.

    I hope this helps. Please let me know if I can further assist you.

    Regards,
    Hetali
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top