Express-chart-component-solution

Community feedback

• 

  Lesley Kimutai•565

  @LeskimPosted over 1 year ago

  You can add the hover on the bars by adding a p tag with the amount while mapping out the data

   <div class=${ bar.day === dayName ? "activeday" : "bar"} 
           style="height:${bar.amount * 3}px"> </div>
           <p class="amount">$${bar.amount}</p>
           <p class="day"> ${bar.day} </p>
  

  then setting it to display when the bars are hovered using css

  .bar_items {
    position: relative;
  }
  
  .amount {
    position: absolute;
    top: -2.3rem;
    background-color: var(--Darkbrown);
    color: var(--Verypaleorange);
    padding: 0.5rem;
    font-size: 0.7rem;
    border-radius: 3px;
    display: none;
  }
  
  .bar:hover + .amount {
    display: block;
  }
  
  

  Marked as helpful

  0