How to properly render the kendo chart custom labels

Question

I neede to customize labels (like a bubbletalk) of a kendo line chart. I build a template (like in this kendo test: http://dojo.telerik.com/@PMcDonou/URiZA. I took this demo from an admin solution in a kendo forum thread) and it work when load the page first time, but in some situations kendo UI not render the labels. The problem appears in this two cases:

When I refresh manually chart with a button that to click on it you need to scroll the page.
When i refresh the page(F5) after that i scrolled down the page.

I noticed that the position of the labels moves upwards based on the offset from top given by scrolling.

I did this fiddle for you to see the first case. For see an example of the second case look the fiddle in a full screen page, try to scroll down and refresh the page(F5) and try this in multiple positions of scroll. Thank you for attention and help me please.

function createChart(){
      var dataSource = new kendo.data.DataSource({
        data: [{
          category: "A", value: 10
        }, {
          category: "B", value: 20
        }, {
          category: "C", value: 30
        }]
      });

      var labelTemplate = kendo.template($("#labelTemplate").html());
      $("#chart").kendoChart({
        dataSource: dataSource, series: [{
          type: "line", style: "smooth", field: "value", categoryField: "category", labels: {
            visible: true, template: "#= category #", visual: function(e) {
              var dataItem = $.grep(dataSource.data(), function(item) {
                return item.category === e.text;
              })[0];
                // Label origin position (same as where the original label would be)
                var origin = e.rect.origin;
                var content = $('')
                  .css({
                    position: "absolute",
                    font: "11px Arial,Helvetica,sans-serif",
                    left: 0,
                    top: 0
                  })
                  .appendTo(document.body)
                  .html(labelTemplate(dataItem));
                var visual = new kendo.drawing.Group();

                kendo.drawing.drawDOM(content).done(function(group) {
                  // Place drawn shapes on original label position
                  group.transform(kendo.geometry.transform().translate(origin.x, origin.y));
                  visual.append(group);

                  // Remove element from DOM
                  content.remove();
                });

                return visual;
            }
          }
        }]
      });
    }

    $(function(){
        createChart();
        $("#refreshChart").on("click", function(){
            $("#chart").data("kendoChart").refresh();
        })
    });

.talk-bubble {
      width: auto;
      height: auto;
      background-color: red;
      color: white;
      border-radius: 30px;
    }

    .talktext {
      padding: 1em;
      text-align: left;
      line-height: 1.5em;
    }

    .talktext p {
      /* remove webkit p margins */
      -webkit-margin-before: 0em;
      -webkit-margin-after: 0em;
    }




 
 Untitled
 
 
 
 
 
 
 
 
    
    
    
    
      
    
    Go down and click button
    
    
    Click button
    
    Now go up, label not rendered

How to properly render the kendo chart custom labels

0 Answers