ExpenseChart Component

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey @nikhil149. I want to give you a recommendation.

  You used height: `${Math.round((value.amount / totalAmount) * 300)}%`;. But it can exceed 100%. So I recommend you to use height: `${(value.amount / maxAmount * 100)}%`;. It will never exceed 100%.

  const amount = data.map((value) => value.amount);
  const maxAmount = Math.max(...amount);
  // const [totalAmount] = useState(amount.reduce((a, b) => a + b, 0));
  

            <div
                  className={
                    maxAmount === value.amount
                      ? "expenseChart_bottomContainer_chart_bar_max"
                      : "expenseChart_bottomContainer_chart_bar"
                  }
                  style={{
                    width: "30px",
  
                    height: `${(value.amount / maxAmount * 100)}%`,
  
                  }}
                ></div>
  

  Marked as helpful

  1
• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey @nikhil149, You do need to design circle Icons. Because it was given in the starter file.

  Marked as helpful

  0
• 

  Sylvain•50

  @sylverdragPosted over 2 years ago

  The "circles" is in fact a logo picture which you can find in the images provided.

  Alternatively, you can draw the logo fairly easily with a couple divs, a border radius of 50% to turn the div in a circle, z-index to put one on top of the other, and a bit of positioning.

  0