Good evening everyone. I am puzzled, I can not think over the algorithm for the graph. In what, actually, the problem is a screen. Here you can see that some elements of x have the same parameter. I can't think of a function for the second and subsequent elements. If there is an element with the same parameter x - you need to calculate the new y (position it above with a slight offset, approximately 10px to the right). Here is the code of the main calculation point.
function prepare(object) { var windowSizePX = 1140; var elemWidth = 20 var countBlocks = windowSizePX / elemWidth; var blockValue = 1000; var blockSizePercent = Math.round((100 / countBlocks) * 1000) / 1000 console.log(blockSizePercent, 'ele') var diapasonsArray = [] // range diapasons for(var key = 0; key < countBlocks; key++) { diapasonsArray.push([blockSizePercent * key, blockSizePercent * (key + 1)]) } console.log(diapasonsArray) // calculate percents for(var key = 0; key < object.length; key++){ object[key].percent = object[key].sum * 100 / blockValue; object[key].r = 10 object[key].y = 265 } // remember block number for each element for(var key = 0; key < object.length; key++){ for(var j = 0; j < diapasonsArray.length; j++) { if(object[key].percent >= diapasonsArray[j][0] && object[key].percent <= diapasonsArray[j][1]) { object[key].blockNumber = j } if(key !== 0) { if(object[key].test === object[key - 1].test) { object[key - 1].x = object[key - 1].blockNumber * 20 } } } } return object } How can y coordinate be calculated?