let Style = styled.div` `; function generateRandomNumbers(arrayLength) { const randomNumbers = []; for (let i = 0; i < arrayLength; i++) { randomNumbers.push(Math.floor(Math.random() * 100)); } return randomNumbers; } const options = { scales: { y: { beginAtZero: true, }, }, }; const data = { datasets: [ { label: "A dataset", data: [ { x: 75, y: -82, }, { x: 61, y: -85, }, { x: -88, y: 23, }, { x: 42, y: -98, }, { x: 34, y: -38, }, { x: 16, y: 89, }, { x: -41, y: -92, }, { x: -82, y: -45, }, { x: -74, y: -28, }, { x: -14, y: -7, }, { x: 46, y: 92, }, { x: 70, y: -1, }, { x: -61, y: -27, }, { x: 43, y: -14, }, { x: 10, y: -60, }, { x: 23, y: -78, }, { x: 77, y: 69, }, { x: -25, y: -29, }, { x: 51, y: 76, }, { x: -8, y: 40, }, { x: 99, y: 36, }, { x: -75, y: -17, }, { x: 77, y: 36, }, { x: 43, y: -88, }, { x: 78, y: 17, }, { x: -32, y: 8, }, { x: -43, y: 36, }, { x: -22, y: 39, }, { x: -88, y: -37, }, { x: -67, y: 10, }, { x: 7, y: -72, }, { x: 1, y: 13, }, { x: 6, y: -25, }, { x: -40, y: 82, }, { x: -69, y: -40, }, { x: -63, y: 43, }, { x: 75, y: 80, }, { x: -42, y: -60, }, { x: 84, y: -17, }, { x: -27, y: -12, }, { x: -11, y: -86, }, { x: -81, y: -19, }, { x: 6, y: 14, }, { x: 73, y: -29, }, { x: -74, y: 16, }, { x: -100, y: -56, }, { x: 56, y: -28, }, { x: 66, y: -29, }, { x: 61, y: -46, }, { x: -28, y: -10, }, { x: 54, y: 42, }, { x: -86, y: -73, }, { x: -49, y: -38, }, { x: 18, y: 96, }, { x: 19, y: -54, }, { x: -81, y: -58, }, { x: -32, y: -89, }, { x: -52, y: -64, }, { x: 8, y: 89, }, { x: 49, y: -65, }, { x: -70, y: -46, }, { x: 22, y: -58, }, { x: 35, y: 81, }, { x: 63, y: 15, }, { x: 66, y: -40, }, { x: 78, y: -73, }, { x: -16, y: -56, }, { x: 63, y: 34, }, { x: 11, y: 88, }, { x: -94, y: -89, }, { x: -97, y: 31, }, { x: 72, y: -18, }, { x: -68, y: -69, }, { x: 84, y: 60, }, { x: 56, y: -92, }, { x: 83, y: -60, }, { x: 3, y: -72, }, { x: -55, y: 66, }, { x: -27, y: -1, }, { x: 85, y: 57, }, { x: 66, y: 66, }, { x: -38, y: 55, }, { x: 37, y: -17, }, { x: 60, y: -36, }, { x: 87, y: 24, }, { x: 52, y: 22, }, { x: 84, y: 50, }, { x: 79, y: 90, }, { x: 23, y: -85, }, { x: -17, y: -98, }, { x: -73, y: -32, }, { x: -49, y: -92, }, { x: 70, y: 70, }, { x: 76, y: -50, }, { x: 7, y: -83, }, { x: -84, y: 65, }, { x: 67, y: -63, }, { x: 69, y: -38, }, { x: -48, y: -30, }, { x: -19, y: -32, }, ], backgroundColor: "rgba(255, 99, 132, 1)", }, ], }; return ( <Style> <div className="text-bg-dark rounded-4 p-3 mb-4"> {data !== null ? ( <p> <ScatterEl options={options} data={data} /> </p> ) : ( <div>Loading ...</div> )} </div> </Style> );