diff --git a/submarine-workbench/workbench-web-ng/package.json b/submarine-workbench/workbench-web-ng/package.json
index 138098d27..eb92afe80 100644
--- a/submarine-workbench/workbench-web-ng/package.json
+++ b/submarine-workbench/workbench-web-ng/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~8.2.9",
     "@angular/platform-browser-dynamic": "~8.2.9",
     "@angular/router": "~8.2.9",
+    "@swimlane/ngx-charts": "^13.0.1",
     "date-fns": "^2.6.0",
     "lint-staged": "^10.2.2",
     "lodash": "^4.17.15",
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
index 00a8c5a3f..77df504ef 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.html
@@ -17,4 +17,22 @@
   ~ under the License.
   -->
 
-<p>charts works!</p>
+<div style="background-color: white; height: 900px; padding: 50px;">
+  <ngx-charts-line-chart
+    [view]="view"
+    [scheme]="colorScheme"
+    [legend]="legend"
+    [showXAxisLabel]="showXAxisLabel"
+    [showYAxisLabel]="showYAxisLabel"
+    [xAxis]="xAxis"
+    [yAxis]="yAxis"
+    [xAxisLabel]="xAxisLabel"
+    [yAxisLabel]="yAxisLabel"
+    [timeline]="timeline"
+    [results]="data"
+    (select)="onSelect($event)"
+    (activate)="onActivate($event)"
+    (deactivate)="onDeactivate($event)"
+    [legendTitle]="title"
+  ></ngx-charts-line-chart>
+</div>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
index ba7b0c710..af6ff4000 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/charts.component.ts
@@ -18,6 +18,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { test_data } from './data';
 
 @Component({
   selector: 'submarine-charts',
@@ -25,7 +26,40 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./charts.component.scss']
 })
 export class ChartsComponent implements OnInit {
-  constructor() {}
+  title = 'Metrics';
+
+  data: any[];
+  view: any[] = [800, 500];
+  legend: boolean = true;
+  showLabels: boolean = true;
+  animations: boolean = true;
+  xAxis: boolean = true;
+  yAxis: boolean = true;
+  showYAxisLabel: boolean = true;
+  showXAxisLabel: boolean = true;
+  xAxisLabel: string = 'Epoch';
+  yAxisLabel: string = 'Percent';
+  timeline: boolean = true;
+
+  colorScheme = {
+    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5']
+  };
+
+  constructor() {
+    this.data = Object.assign([], test_data);
+  }
+
+  onSelect(data): void {
+    console.log('Item clicked', JSON.parse(JSON.stringify(data)));
+  }
+
+  onActivate(data): void {
+    console.log('Activate', JSON.parse(JSON.stringify(data)));
+  }
+
+  onDeactivate(data): void {
+    console.log('Deactivate', JSON.parse(JSON.stringify(data)));
+  }
 
   ngOnInit() {}
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts
new file mode 100644
index 000000000..60e4493f4
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/charts/data.ts
@@ -0,0 +1,91 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export var test_data = [
+  {
+    name: 'loss',
+    series: [
+      {
+        name: 'Epoch1',
+        value: 0.204
+      },
+      {
+        name: 'Epoch2',
+        value: 0.1799
+      },
+      {
+        name: 'Epoch3',
+        value: 0.1772
+      }
+    ]
+  },
+
+  {
+    name: 'accuracy',
+    series: [
+      {
+        name: 'Epoch1',
+        value: 0.9356
+      },
+      {
+        name: 'Epoch2',
+        value: 0.9406
+      },
+      {
+        name: 'Epoch3',
+        value: 0.944
+      }
+    ]
+  },
+
+  {
+    name: 'val_loss',
+    series: [
+      {
+        name: 'Epoch1',
+        value: 0.2655
+      },
+      {
+        name: 'Epoch2',
+        value: 0.1578
+      },
+      {
+        name: 'Epoch3',
+        value: 0.1471
+      }
+    ]
+  },
+  {
+    name: 'val_accuracy',
+    series: [
+      {
+        name: 'Epoch1',
+        value: 0.907
+      },
+      {
+        name: 'Epoch2',
+        value: 0.945
+      },
+      {
+        name: 'Epoch3',
+        value: 0.959
+      }
+    ]
+  }
+];
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
index 774c87a19..1df383efe 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.module.ts
@@ -8,6 +8,7 @@ import { OutputsComponent } from './experiment-info/outputs/outputs.component';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
@@ -30,7 +31,7 @@ import { FormsModule } from '@angular/forms';
 
 @NgModule({
   exports: [ReactiveFormsModule],
-  imports: [NgZorroAntdModule, CommonModule, FormsModule],
+  imports: [NgZorroAntdModule, CommonModule, FormsModule, NgxChartsModule],
   declarations: [ExperimentInfoComponent, HyperParamsComponent, MetricsComponent, ChartsComponent, OutputsComponent]
 })
 export class ExperimentModule {}