Breaking News: Grepper is joining You.com. Read the official announcement!

display bar in angular html css

Nanu answered on October 19, 2023 Popularity 1/10 Helpfulness 8/10

answer display bar in angular html css

display bar in angular html css

Comment

<span class="bar" [style.background-color]="'red'"
                            [style.height.px]="getBarHeight(box.activityTypeCounts, 'Enrollment-RFI')"
                            [matTooltip]="getTooltipText(box.activityTypeCounts, 'Enrollment-RFI')"></span>

 boxes: IssueDashboardViewModel[] = [];
    activityDisplay: boolean = false; 

    // In your Angular component
    getBarHeight(activityTypeCounts: { [key: string]: number }, activityType: string): string {
        if (activityTypeCounts && activityTypeCounts[activityType]) {
            const count = activityTypeCounts[activityType];
            return count > 0 ? count + 'px' : '0';
        }
        return '0';
    }
.box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  // padding: 10px;
  text-align: center;
  // min-height: 100px;
}

.date {
  // font-size: 18px;
  font-weight: bold;
}

.issue-count {
  // margin-top: 10px;
  // font-size: 14px;
  color: #007bff;
  /* Adjust the color as needed */
}

/* Add this CSS to your styles.css or styles.scss file */
/* Add this CSS to your styles.css or styles.scss file */
.bar {
  display: inline-block;
  width: 8px;
  /* Adjust the width as needed */
  height: 20px;
  /* Adjust the height as needed */
  margin-left: 4px;
  /* Adjust the spacing between bars as needed */
  vertical-align: middle;
}

Popularity 1/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: angular css display html

Link to this answer
Share Copy Link

Contributed on Oct 19 2023

Nanu

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

display bar in angular html css

Contents

More Related Answers

display bar in angular html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.