<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;

}