Fit shape width/height to text or fit text to shape width

4 posts, 0 answers
  1. Leo
    Leo avatar
    4 posts
    Member since:
    Aug 2011

    Posted 10 Jun 2015 Link to this post

    I can't seem to find any settings on how to make the shape auto-fit the content text or make the text auto size to fit the shape width.  Can you please explain how this can be done? 
  2. Vessy
    Vessy avatar
    2189 posts

    Posted 12 Jun 2015 Link to this post

    Hi Leo,

    RadDiagram does not provide a built-in functionality to automatically wrap the text of a shape, or to transfer it to multiple lines. The only possible way to achieve a similar fnctionality for the moment is to use the RadDiagram Visual template functionality and add several Tex objects to a shape, so each of them will be rendered as a separate row. A live example of such implementation is available in the RadDiagram Overview demo:

  3. Anitha
    Anitha avatar
    2 posts
    Member since:
    Feb 2015

    Posted 23 Feb 2018 Link to this post

    Hi Vassy,  is there a way to do it now in the Q1 2018 version of Telerik controls? 


    Thank you!

  4. Vessy
    Vessy avatar
    2189 posts

    Posted 23 Feb 2018 Link to this post

    Hi Anitha,

    The discussed feature is still not available out-of-the-box in the diagram, but not the control provides an option to set  HTML content for its shapes, so you can achieve it easier.

    For example:
    <telerik:RadDiagram ID="RadDiagram1" runat="server">
            <telerik:DiagramShape Id="s1" X="100" Y="100" Width="200">
                <ContentSettings Html="<div style='width:100px'>Long text content on multiple rows</div>" />

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top