diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 5257bd5bd7420cea0888db7bc6f8fa290b470317..8938fac3704534fccefd1a4a006cbc85eea0dff2 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,10 +1,5 @@
 <div>
   <div style="display: block">
-    <canvas baseChart
-      [datasets]="chartData"
-      [labels]="chartLabels"
-      [options]="chartOptions"
-      [legend]="chartLegend"
-      [chartType]="chartType"></canvas>
+    <canvas id="chart"></canvas>
   </div>
 </div>
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 3999507bb722d612464514261157a77645e9f746..07a59f5dd17cd3f365b456a79609d916e511c757 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -1,4 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { Chart } from 'chart.js';
+import { ActivatedRoute } from '@angular/router';
+import { Content } from '../../../models/content';
+
+export class ContentStatistic {
+  content: Content;
+  contentId: string;
+  percent: number;
+  counts: number;
+  abstentions: number;
+
+  constructor(content: Content, contentId: string, percent: number, counts: number, abstentions: number) {
+    this.content = content;
+    this.contentId = contentId;
+    this.percent = percent;
+    this.counts = counts;
+    this.abstentions = abstentions;
+  }
+}
 
 @Component({
   selector: 'app-statistic',
@@ -7,23 +26,36 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StatisticComponent implements OnInit {
 
-  chartOptions = {
-    scaleShowVerticalLines: false,
-    responsive: true
-  };
+  chart = [];
+  colors: string[] = ['rgba(33,150,243, 0.8)', 'rgba(76,175,80, 0.8)', 'rgba(255,235,59, 0.8)', 'rgba(244,67,54, 0.8)',
+                      'rgba(96,125,139, 0.8)', 'rgba(63,81,181, 0.8)', 'rgba(233,30,99, 0.8)', 'rgba(121,85,72, 0.8)'];
+  labels: string[] = ['a', 'b', 'c', 'd'];
+  data: number[] = [12, 30, 43, 32];
+  stats: ContentStatistic;
+  roomId: string;
 
-  chartLabels = ['a', 'b', 'c', 'd'];
-  chartType = 'bar';
-  chartLegend = true;
-
-  chartData = [
-    { data: [12, 30, 43, 32], label: 'dataOne' },
-    { data: [8, 20, 33, 12], label: 'dataTwo' }
-  ];
-
-  constructor() { }
+  constructor(protected route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.roomId = params['contentId'];
+    });
+    console.log(this.roomId);
+    this.chart = new Chart('chart', {
+      type: 'bar',
+      data: {
+        labels: this.labels,
+        datasets: [{
+          data: this.data,
+          backgroundColor: this.colors
+        }]
+      },
+      options: {
+        legend: {
+          display: false
+        },
+        responsive: true
+      }
+    });
   }
-
 }