Simple Overall Details

Overall Score

• Find this comment <! -- Simple Overall Details --> in your container and add below snippet there. Don't remove the comment so you can understand the things properly.
• below we added placeholders like this ex. {{dashboard.data["Overall_score"]}} here you need to check the your dataset field name is proper or not

Use below snippet to achieve above result:

<div class="card-progress-stat"><div class="card-progress"><ul class="progress-bar-list"><li><div class="progress-title gcf-label">Your Score </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Score']" [style.width]="dashboard.data['Overall_Score']*10+'%'">{{dashboard.data['Overall_Score']}}/{{dashboard.data['Overall_out_of']}} </div></div></li><li><div class="progress-title gcf-label">Sector Average </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Sector_Average']" [style.width]="dashboard.data['Overall_Sector_Average']*10+'%'">{{dashboard.data['Overall_Sector_Average']}}/ {{dashboard.data['Overall_out_of']}}  </div></div></li><li><div class="progress-title gcf-label">Regional average </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Region_Average']" [style.width]="dashboard.data['Overall_Region_Average']*10+'%'">{{dashboard.data['Overall_Region_Average']}}/{{dashboard.data['Overall_out_of']}} </div></div></li><li><div class="progress-title gcf-label">Average all companies </div><div class="progress"><div aria-valuemax="10" aria-valuemin="0" class="progress-bar gcf-lightblue" role="progressbar" [attr.aria-valuenow]="dashboard.data['Overall_Average']" [style.width]="dashboard.data['Overall_Average']*10+'%'"> {{dashboard.data['Overall_Average']}}/{{dashboard.data['Overall_out_of']}} </div></div></li></ul></div><div class="card-stat"><div class="card-stat-wrap gcf-lightblue"><div class="card-stat-row"><h3>{{dashboard.data["Overall_Score"]}} / {{dashboard.data['Overall_out_of']}}</h3><h4>{{dashboard.data["Overall_Score_Roadmap_Stage"]}}</h4></div></div></div></div>