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 = [];

  const collisitonTest = (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 collisitonTest(moveObject(position, haveAbove, haveBelow), list);
    }
    return position;
  }

  const collisionAvoid = (position, list) => {
    return collisitonTest(position, list);
  }

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

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

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

  var labelPosition = (label) => {
    let draw = kendo.drawing;
    let geom = kendo.geometry;
    
    let basePosition = [label.rect.origin.x, label.rect.origin.y];
    let labelPosition = collisionAvoid([basePosition[0], basePosition[1]], positions);
    
    let rectPosition = [labelPosition[0] - 1, labelPosition[1] - 0];
    let rectGeometry = new geom.Rect(rectPosition,...