How to fit my big data into the screen that fits end to end? - position

Question

const scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
const camera = new THREE.PerspectiveCamera( 25, window.innerWidth /
window.innerHeight, 0.5, 1000 );
// create a render and set the size
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// add the output of the renderer to the html element
document.body.appendChild( renderer.domElement );
// create orbiting camera controls
const controls = new OrbitControls( camera, renderer.domElement );
// position the camera
camera.position.z = 100;
camera.position.y = 10;
camera.position.x = 10;
// get the data using fetch
fetch( './json/HLE.json' )
.then( response => response.json() )
.then( data => {
// callback that is called once the data has been fetched
// iterate through the data
let i = 0;
data.forEach( row => {
// do something for each row
console.log(row.Country_Code);
console.log(row.YR2019);
// create a cube with dimensions according to the row
const max = 90;
const height = row.YR2019 / max;
const geometry = new THREE.BoxGeometry( 0.5, height, 0.5 );
const material = new THREE.MeshBasicMaterial( { color: 0x336699 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// offset the cube to the right by the index i times offset width (to spread)
const offsetWidth = 1.0;
cube.position.x = i * offsetWidth;
// shift the cube upwards by half it's height
cube.position.y = height / 2;
// increment the index i
i += 1;
} );
} )
// Now we're ready to render our scene
//This function will be called every frame
function animate() {
// ask the browser to call this function again when it's ready to draw the next frame
requestAnimationFrame( animate );
// update the camera controls
controls.update();
// render the scene
renderer.render( scene, camera );
}
// call the animate function
animate();