A comparison bar between two values - React

user_18818586 0
Viewed 32

I have a UI component that I need to build but I have no idea how to go about it.

UI component example

There are two different values for each exchange, Sold and Bought. I need to create a bar like that based on different values. How can I achieve that?

reactjs css
1 Answers

maybe you will have API where you get these datas, in there must be percentage of how much it is so build like that what I build in HTML and in first-progressand second-progress tags style width as what you get in response

style={{width: `${first.percentage}%`}}

React code must look like this

const App = () => {
    const [data, setData] = useState({first: 66, second: 34})
    return (
      <div class="container">
         <div className="first-progrss" style={{width: `${data.first}%`}} />
         <div className="second-progrss" style={{width: `${data.second}%`}} />
      </div>
    )
}

DEMO

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
.container{
  width: 100%;
  height: 20px;
  border: 1px solid #000;
  display: flex;
}

.first-progrss{
  width: 66%;
  background: red;
}
.second-progrss{
  width: 34%;
  background: blue;
}
<div class="container">
  <div class="first-progrss"></div>
  <div class="second-progrss"></div>
</div>

user_140566470
Related