Index: modules/uoa-repository-dashboard-gui/branches/new-ui/package.json
===================================================================
--- modules/uoa-repository-dashboard-gui/branches/new-ui/package.json	(revision 57616)
+++ modules/uoa-repository-dashboard-gui/branches/new-ui/package.json	(revision 57617)
@@ -25,6 +25,8 @@
     "angular2-cookie-law": "^6.0.4",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
+    "highcharts": "^7.2.1",
+    "highcharts-angular": "^2.4.0",
     "jquery": "^3.4.1",
     "jquery-bez": "^1.0.11",
     "ngx-bootstrap": "^3.0.1",
Index: modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/dashboard/dashboard.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/dashboard/dashboard.component.ts	(revision 57616)
+++ modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/dashboard/dashboard.component.ts	(revision 57617)
@@ -184,7 +184,7 @@
         console.log(error);
       } ,
       () => {
-        this.shortSelectedRepoId = selectedRepo.id.replace('____', '').replace('_____', '').replace('::', ':');
+        this.shortSelectedRepoId = selectedRepo.id.replace(/_/g, '').replace('::', ':');
         this.loadingUsageStatsMessage = '';
         this.errorUsageStatsMessage = '';
       }
Index: modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility.module.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility.module.ts	(revision 57616)
+++ modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility.module.ts	(revision 57617)
@@ -16,6 +16,7 @@
 import { CompatibilityValidateStep2Component } from './compatibility-validate-forms/compatibility-validate-step2.component';
 import { CompatibilityValidateStep3Component } from './compatibility-validate-forms/compatibility-validate-step3.component';
 import { CompatibilityValidateStep3CrisComponent } from './compatibility-validate-forms/compatibility-validate-step3-cris.component';
+import {HighchartsChartModule} from 'highcharts-angular';
 
 @NgModule ({
   imports: [
@@ -24,7 +25,8 @@
     FormsModule,
     ReactiveFormsModule,
     CompatibilityRouting,
-    ReusableComponentsModule
+    ReusableComponentsModule,
+    HighchartsChartModule
   ],
   declarations: [
     CompatibilityComponent,
Index: modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.ts	(revision 57616)
+++ modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.ts	(revision 57617)
@@ -6,6 +6,8 @@
          noUsageRulesResults } from '../../domain/shared-messages';
 import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';
 import { AuthenticationService } from '../../services/authentication.service';
+import * as Highcharts from 'highcharts';
+import {text} from '@angular/core/src/render3/instructions';
 
 @Component({
   selector: 'app-compatibility-validation-results',
@@ -27,6 +29,14 @@
   modalTitle: string;
   isModalShown: boolean;
 
+  index = 0;
+  ruleName: string[] = [];
+  unprocessedData: string[] = [];
+  processedData: number[] = [];
+
+  Highcharts: typeof Highcharts = Highcharts;
+  chartOptions: Highcharts.Options;
+
   @ViewChild('checkErrors')
   public checkErrors: ConfirmationDialogComponent;
 
@@ -59,6 +69,8 @@
             entry => {
               if (entry.type === 'content') {
                 this.contentResults.push(entry);
+                this.ruleName.push(entry.name);
+                this.unprocessedData.push(entry.successes.split('/')[0]);
               } else if (entry.type === 'usage') {
                 this.usageResults.push(entry);
               }
@@ -75,6 +87,14 @@
         this.loadingMessage = '';
         if (!this.contentResults.length) {
           this.noContent = noContentRulesResults;
+        } else {
+          this.processedData = this.unprocessedData.map(Number);
+          this.chartOptions = {
+            title: { text: 'Number of records'},
+            yAxis: { title: { text: 'Number of records' } },
+            xAxis: { categories: this.ruleName },
+            series: [{ name: 'For content', data: this.processedData, type: 'column' }]
+          };
         }
         if (!this.usageResults.length) {
           this.noUsage = noUsageRulesResults;
Index: modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.html	(revision 57616)
+++ modules/uoa-repository-dashboard-gui/branches/new-ui/src/app/pages/compatibility/compatibility-validation-results.component.html	(revision 57617)
@@ -36,6 +36,14 @@
               <div class="uk-margin-small">by {{jobSummary.userEmail}}</div>
             </div>
 
+            <div id="container" class="md-card tabs">
+              <highcharts-chart
+                [Highcharts] = "Highcharts"
+                [options] = "chartOptions"
+                style="width: 100%; height: 400px; display: block;"
+              ></highcharts-chart>
+            </div>
+
             <div class="md-card tabs">
               <div class="md-card-content">
 
