How to change the font size of the shapes in Telerik RadDiagram

2 posts, 0 answers
  1. Nedim
    Nedim avatar
    11 posts
    Member since:
    Mar 2012

    Posted 16 Jun Link to this post

    I am using RadDiagram. It looks like the control doesn't offer the ability of changing font sizes for the texts in shapes. Is there any workaround to change font sizes?
     
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 Jun Link to this post

    Hi Nedim,

    There are several possible ways to control the font size of the text content inside a shape:
    • You can utilize the Html property of the control, allowing you to embed and style standard html elements inside a shape:
      <telerik:RadDiagram ID="diagram1" runat="server">
          <ShapesCollection>
              <telerik:DiagramShape Id="Shape1" Width="150" Type="Rectangle">
                  <ContentSettings Html="<div style='font-size:24px;'>Text content</div>" />
              </telerik:DiagramShape>
          </ShapesCollection>
      </telerik:RadDiagram>
    • You can configure the font size of a TextBlock object, added to the shape's content through the diagram's Visual template functionality:
      var visualTemplate = function (options) {
          var diagram = kendo.dataviz.diagram;
       
          var group = new diagram.Group({
              autoSize: true
          });
       
          var circle = new diagram.Rectangle({
              width: 200,
              height: 100,
              fill: "#32CD32"
          });
          group.append(circle);
       
          var textBlock1 = new diagram.TextBlock({
              text: "Text content",
              color: "#ffffff",
              fontSize: 16,
              x: 28,
              y: 32
          });
          group.append(textBlock1);
       
          return group;
      };
    Regards,
    Vessy
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top