Attempting to design a Polar/Radar Chart, my goal is to create distinct sections within the first circle based on the number of array items. Each item.name should be displayed in its own section with consistent text styling along the arc. The dimensions of the circle are set to 720px width and height.
Currently, as I iterate through the array and display the names, a separate circle is generated for each name due to mapping outside the container.
Any suggestions or solutions would be greatly appreciated. Thank you
const items = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "HTML" }, { "id": 1, "name": "CSS" }]
const length = items?.length ?? 0
const width = 720
const slice = width / length
return (
<div>
{ items?.map(item =>
<div className={styles.circle} style={{width: `${slice}}}>
<p>{item.name}</p>
</div>
)}
</div>
)
//css
.circle {
height: 720px;
border: solid 1px #fafafa;
background: #fafafa;
border-radius: 50%;
padding: 20px;
position: relative;
}