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

2 posts, 0 answers
  1. Ned
    Ned avatar
    12 posts
    Member since:
    Mar 2012

    Posted 16 Jun 2016 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
    Vessy avatar
    1664 posts

    Posted 17 Jun 2016 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">
              <telerik:DiagramShape Id="Shape1" Width="150" Type="Rectangle">
                  <ContentSettings Html="<div style='font-size:24px;'>Text content</div>" />
    • 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"
          var textBlock1 = new diagram.TextBlock({
              text: "Text content",
              color: "#ffffff",
              fontSize: 16,
              x: 28,
              y: 32
          return group;
Back to Top