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

[Ned]

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?

 

[Vessy]

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