how to align flex items to represent a bar chart - html

Question

I have been trying to style the react component so that it looks like a horizontal bar chart. However, I am unable to align the centre div to the left as expected.
here is my react component for each row.
import React from 'react'
const level3UnitItem = ({ item, ratio }) => {
return (
<div className='country-div' >
<div className='name-div'> <h1>{item.country}</h1></div>
<div style={{ width: `${ratio * 400}px`, backgroundColor: 'red' }} className='bar-div'>
</div>
<div className='number-div'><h1>{item.population.toLocaleString('en-US')}</h1></div>
</div>
)
}
export default level3UnitItem
here is the css
.country-div{
width: 100%;
display: flex;
justify-content: space-between;
padding: 1rem;
margin: .2px;
}
.country-div h1, h2{
font-size: small;
}
and the current design is
I am expecting it to be

Answer 1

You will have to put 'name-div' and 'bar-div' inside another div(a parent div), like this:
import React from 'react'
const level3UnitItem = ({ item, ratio }) => {
return (
<div className='country-div' >
<div className="name-bar-container">
<div className='name-div'> <h1>{item.country}</h1></div>
<div style={{ width: `${ratio * 400}px`, backgroundColor: 'red' }} className='bar-div'>
</div>
</div>
<div className='number-div'><h1>{item.population.toLocaleString('en-US')}</h1></div>
</div>
)
}
export default level3UnitItem
CSS for 'name-bar-container' div:
.name-bar-container {
width: 100%;
display: flex;
}
you can also add margin-left to 'bar-div' to format it.

Answer 2

Can you try this? i add div inside the center div. then style it..
import React from 'react'
const level3UnitItem = ({ item, ratio }) => {
return (
<div className='country-div' >
<div className='name-div'> <h1>{item.country}</h1></div>
<div class="__toLeft">
<div style={{ width: `${ratio * 400}px`, backgroundColor: 'red' }} className='bar-div'>
</div>
</div>
<div className='number-div'><h1>{item.population.toLocaleString('en-US')}</h1>
</div>
</div>
)
}
export default level3UnitItem
and as for the css
.country-div{
width: 100%;
display: flex;
justify-content: space-between;
padding: 1rem;
margin: .2px;
}
.country-div h1, h2{
font-size: small;
}
.__toLeft {
display: flex;
justify-content: flex-start;
align-items: center;
}

Answer 3

I figured a a way to align those elements by wrapping the last two div(inside parent-div) into a new div and that solve my porblem.
import React from 'react'
const level3UnitItem = ({ item, ratio }) => {
return (
<div className='country-div' >
<div className='name-div'> <h1>{item.country}</h1></div>
<div className='barbar-div'>
<div style={{ width: `${ratio * 400}px`, backgroundColor: '#ffa500 ' }} className='bar-div' >
</div>
<div className='number-div'><h1>{item.population.toLocaleString('en-US')}</h1></div>
</div>
</div>
)
}
export default level3UnitItem
.country-div{
width: 100%;
display: flex;
justify-content: space-between;
padding: .3rem;
margin: .2px;
/* border: 1px solid black;
border-radius: .25rem; */
line-height: 2;
}
.country-div h1, h2{
font-size: small;
}
.name-div{
width: 300px;
}
.barbar-div{
width: 100%;
display: flex;
justify-content: space-between;
}

Answer 4

1. Create a container element and set its display property to "flex" to make it a flex container.
2. Create the individual flex items that will represent the bars of the chart. These can be div elements or any other HTML elements you prefer.
3. Set the width of each flex item to the appropriate percentage based on the data you want to represent in the chart. For example, if you want to represent a 50% value, set the width of the flex item to 50%.
4. Set the height of each flex item to a fixed value, such as 20px, to create a consistent height for all the bars in the chart.
5. Use the align-items property on the flex container to align the bars vertically. For example, use "align-items: center" to center the bars vertically in the container.
6. Use the justify-content property on the flex container to align the bars horizontally. For example, use "justify-content: space-between" to distribute the bars evenly across the container.
7. Use CSS to add colors and other styling to the flex items to make them look like bars in a chart.
8. Finally, add labels and other text elements to the chart to provide context and information about the data.
Note: To make the chart responsive, you can use media queries to adjust the width and height of the flex items and container based on the screen size.