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() {
  console.clear();
  var positions = [];
  var labels = [];
  var index = 0;

  const collisionTest = (position, list, detectHorizontalCollision = false) => {
    let rangeX = 5;
    let rangeLabelY = 20;
    let rangePointY = 15;
    let collided = _.filter(list, i =>
      (detectHorizontalCollision 
      	? 
      	((Math.abs(i.label[0] - position[0]) <= rangeX) ||
        (Math.abs(i.point[0] - position[0]) <= rangeX))
        : 
        ((i.label[0] == position[0]) ||
        (i.point[0] == position[0]))
      ) &&
      ((Math.abs(i.label[1] - position[1]) <= rangeLabelY) || 
      (Math.abs(i.point[1] - position[1]) <= rangePointY))
		);
    
    if (collided.length) {
      let haveAbove = _.some(collided, i => (i.label[1] - position[1] <= 0) || (i.point[1] - position[1] <= 0));
      let haveBelow = _.some(collided, i => (i.label[1] - position[1] > 0) || (i.point[1] - position[1] > 0));
      return collisionTest(moveObject(position, haveAbove, haveBelow), list);
    }
    return position;
  }

  const collisionAvoid = (position, list) => {
    return collisionTest(position, list);
  }
  
  const calculatePosition = (labels, positions) => {
  	for(var i in labels) {
    	var newPositions = _.cloneDeep(positions);
    	_.pullAt(newPositions, i);
    	var pos = collisionAvoid(positions[i].label, newPositions);
      labels[i].text.position(pos);
    }
    
    return;
  }

  const moveObject = (currentPosition, haveAbove, haveBelow) => {
    let position = _.clone(currentPosition);
    let distance = 4;

		position[1] += distance;
    //if (haveAbove) {
    //  position.label[1] += distance;
    //} else if (haveBelow) {
    //  position.label[1] -= distance;
   	//}
		
    return position;
  }

  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) => {
  
    let draw =...