diff --git a/package-lock.json b/package-lock.json
index be902ff..4f55c70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2364,6 +2364,14 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angular-plotly.js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/angular-plotly.js/-/angular-plotly.js-3.0.0.tgz",
+      "integrity": "sha512-xN82jUgJ/43+1a90k6uomr7gpbHK2SuuhhSfMKKKVAL6hDJFptjdQZzradg6qvHA3icV5uVe9FQHtaQJh3RMhQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "angular-split": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/angular-split/-/angular-split-4.0.0.tgz",
diff --git a/package.json b/package.json
index 032567e..ea4ba21 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@angular/router": "~10.2.0",
     "@types/jquery": "^3.5.3",
     "@types/leaflet": "^1.5.19",
+    "angular-plotly.js": "^3.0.0",
     "angular-split": "^4.0.0",
     "bootstrap": "^4.5.3",
     "jquery": "^3.5.1",
diff --git a/src/app/component/app.component.html b/src/app/component/app.component.html
index 59d488c..f4ec0c3 100644
--- a/src/app/component/app.component.html
+++ b/src/app/component/app.component.html
@@ -7,10 +7,10 @@
     </as-split-area>
     <as-split-area size="80">
       <as-split direction="vertical">
-        <as-split-area size="100">
+        <as-split-area  size="100">
           <app-map></app-map>
         </as-split-area>
-        <as-split-area size="100">
+        <as-split-area  size="100">
           <app-graph></app-graph>
         </as-split-area>
       </as-split>
diff --git a/src/app/component/app.module.ts b/src/app/component/app.module.ts
index 99c1b0c..ae0e7d2 100644
--- a/src/app/component/app.module.ts
+++ b/src/app/component/app.module.ts
@@ -12,6 +12,10 @@ import {ImportVesselsComponent} from './import-vessels/import-vessels.component'
 import {ImportVesselsDirective} from './import-vessels/import-vessels.directive';
 import {ListVesselComponent} from './list-vessel/list-vessel.component';
 import {AngularSplitModule} from 'angular-split';
+import {PlotlyModule} from 'angular-plotly.js';
+import * as PlotlyJS from 'plotly.js/dist/plotly.js';
+
+PlotlyModule.plotlyjs = PlotlyJS;
 
 @NgModule({
   declarations: [
@@ -29,6 +33,7 @@ import {AngularSplitModule} from 'angular-split';
     AppRoutingModule,
     NgxBootstrapIconsModule.pick(allIcons),
     AngularSplitModule,
+    PlotlyModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/component/graph/graph.component.html b/src/app/component/graph/graph.component.html
index 5afff4d..5808197 100644
--- a/src/app/component/graph/graph.component.html
+++ b/src/app/component/graph/graph.component.html
@@ -1 +1,4 @@
-<div id="graph" style="width:600px;height:250px;"></div>
+<plotly-plot [data]="graph.data" [layout]="graph.layout" [style]="{position: 'relative', width: '100%' , height:'100%'}">
+
+</plotly-plot>
+
diff --git a/src/app/component/graph/graph.component.ts b/src/app/component/graph/graph.component.ts
index ae46986..17d0d52 100644
--- a/src/app/component/graph/graph.component.ts
+++ b/src/app/component/graph/graph.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {SelectedVesselService} from '../../service/selected-vessel.service';
+import {Vessel} from '../../model/vessel';
 
 @Component({
   selector: 'app-graph',
@@ -6,10 +8,70 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./graph.component.scss']
 })
 export class GraphComponent implements OnInit {
+  selectedVessel: Vessel;
 
-  constructor() { }
+  constructor(private selectedVesselService: SelectedVesselService) {
+  }
+
+  // var trace1 = {
+  //   x: [1, 2, 3, 4, 5],
+  //   y: [1, 6, 3, 6, 1],
+  //   mode: 'markers+text',
+  //   type: 'scatter',
+  //   name: 'Team A',
+  //   text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
+  //   textposition: 'top center',
+  //   textfont: {
+  //     family:  'Raleway, sans-serif'
+  //   },
+  //   marker: { size: 12 }
+  // };
+
+  public graph = {
+    data: [],
+    layout: {
+      xaxis: {
+        title: ''
+      },
+      yaxis: {
+        title: ''
+      }
+    }
+  };
 
   ngOnInit(): void {
+    this.connectSelectVesselObservable();
+  }
+
+  connectSelectVesselObservable(): void {
+    this.selectedVesselService.currentVessel.subscribe(vessels => {
+      this.selectedVessel = vessels;
+      this.updateGraph();
+    });
+  }
+
+  cleanGraph(): void {
+    this.graph.data = [];
+    this.graph.layout.xaxis.title = '';
+    this.graph.layout.yaxis.title = '';
+  }
+
+  updateGraph(): void {
+
+    const trace1 = {
+      x: [],
+      y: [],
+      mode: 'markers',
+      type: 'scatter',
+      name: '',
+    };
+    this.selectedVessel.messages.forEach(value => {
+      trace1.x.push(value.longitude);
+      trace1.y.push(value.time);
+    });
+    this.graph.data.push(trace1);
+    this.graph.layout.xaxis.title = 'longitude';
+    this.graph.layout.yaxis.title = 'time';
   }
 
 }