Kendo UI Chart Category Axis Custom Visual

Question

I'm trying to create a custom visual for the category axis label for a Kendo UI chart. The visual needs to look like a table sitting below the chart. So far I have been able to draw a table-like visual but can't find any documentation to position text inside the table. How do I position text inside the Rect?

Code:

        $("#chart").kendoChart({
            categoryAxis: {
                categories: ["M1", "M2", "M3", "M4"],
                labels: {
                    visual: function (e) {
                        var draw = kendo.drawing;
                        var geom = kendo.geometry;
                        var Rect = geom.Rect;
                        var Path = draw.Path;
    
                        var rect = new Rect(e.rect.origin, [e.rect.size.width, 300]);
                        var pathRect = new Rect(e.rect.origin, [e.rect.size.width, 50]);
    
                        var pathA = Path.fromRect(pathRect);
                        var pathB = Path.fromRect(pathRect);
    
                        var layout = new kendo.drawing.Layout(rect, {
                            orientation: "vertical"
                        });
    
                        var p = new geom.Point(e.rect.origin.x, e.rect.origin.y);
                        var t1 = new kendo.drawing.Text(e.text, p);
                        var t2 = new kendo.drawing.Text("test1", p);
    
                        layout.append(pathA, pathB, t1, t2);
    
                        layout.reflow();
                        return layout;
                    }
                }
            },
            series: [{
                data: [1, 2, 3, 4]
            }]
        });

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
      
    <div id="chart"></div>

ezanker ezanker · Accepted Answer · 2016-03-10T14:53:44

You are adding the rectangles and text to a Layout element which is designed to flow its children and avoid having one over the other. Instead, use the group element and then place the rectangles and text accordingly:

$("#chart").kendoChart({
  categoryAxis: {
    categories: ["M1", "M2", "M3", "M4"],
    labels: {
      visual: function (e) {
        var draw = kendo.drawing;
        var geom = kendo.geometry;
        var Rect = geom.Rect;
        var Path = draw.Path;


        var rect = new Rect([e.rect.origin.x, e.rect.origin.y ], [e.rect.size.width, 50]);
        var pathA = Path.fromRect(rect);

        var pathRect = new Rect([e.rect.origin.x, e.rect.origin.y + 50], [e.rect.size.width, 50]);
        var pathB = Path.fromRect(pathRect);

        var p1 = new geom.Point(e.rect.origin.x + 4, e.rect.origin.y + 4);
        var t1 = new draw.Text(e.text, p1);
        var p2 = new geom.Point(e.rect.origin.x + 4, e.rect.origin.y + 54);                        
        var t2 = new draw.Text("test1", p2);

        var group = new draw.Group();
        group.append(pathA,pathB, t1, t2); 

        return group;
      }
    }
  },
  series: [{
    data: [1, 2, 3, 4]
  }]
});

Kendo UI Chart Category Axis Custom Visual

1 Answers

DEMO