Kendo Avoid Text Overlapping

Script to avoid text overlapping

by Edson Henrique

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id="chart"></div>
<img id='img' />

JavaScript

$(document).ready(function() {

var data = _.map(_.range(0, 20), (i) => ({
    value: _.random(600, 650),
    value2: _.random(600, 650),
    value3: _.random(600, 650),
    value4: _.random(600, 650)
  }));

  var labelPosition = (label) => {
  
  	var createdLabel = label.createVisual();
    return createdLabel;
  };

  $("#chart").kendoChart({
    series: [
    	{
        type: "line",
        labels: {
          visible: true,
          visual: labelPosition,
          background: 'rgba(255,255,255,1)',
          border: {
            color: 'pink',
            width: 1
          }
        },
        name: "Series 1",
        data: _.map(data, i => i.value)
    	},
      {
        type: "line",
        labels: {
          visible: true,
          visual: labelPosition,
          background: 'rgba(255,255,255,1)',
          border: {
            color: 'yellow',
            width: 1
          }
        },
        name: "Series 1",
        data: _.map(data, i => i.value2)
    	},
      {
        type: "line",
        labels: {
          visible: true,
          visual: labelPosition,
          background: 'rgba(255,255,255,1)',
          border: {
            color: 'blue',
            width: 1
          }
        },
        name: "Series 1",
        data: _.map(data, i => i.value3)
    	},
       {
        type: "line",
        labels: {
          visible: true,
          visual: labelPosition,
          background: 'rgba(255,255,255,1)',
          border: {
            color: 'red',
            width: 1
          }
        },
        name: "Series 1",
        data: _.map(data, i => i.value4)
    	}
    ]
  })

  var chart = $("#chart").getKendoChart();
  _.delay(() => chart.exportImage().done(function(data) {
    $('#img').attr('src', data);
  }), 1000);

  //console.log($('#chart svg g[clip-path] > text'));
});