diff --git a/view/global.css b/view/global.css
index f3ca22b75a..2cfd046ca2 100644
--- a/view/global.css
+++ b/view/global.css
@@ -399,14 +399,9 @@ a {
   color: #00a700;
 }
 .federation-graph {
-  width: 400px;
-  height: 400px;
-  float: right;
-  margin: 20px;
+  margin: 0 auto;
 }
 .federation-network-graph {
-  width: 240px;
-  height: 240px;
   float: left;
   margin: 20px;
 }
diff --git a/view/templates/admin/federation.tpl b/view/templates/admin/federation.tpl
index 6904be6b92..cbd3a40a1e 100644
--- a/view/templates/admin/federation.tpl
+++ b/view/templates/admin/federation.tpl
@@ -1,5 +1,5 @@
-<script src="{{$baseurl}}/library/Chart.js-1.0.2/Chart.min.js"></script>
-<canvas id="FederationChart" class="federation-graph"></canvas>
+<script src="{{$baseurl}}/vendor/asset/Chart-js/dist/Chart.min.js"></script>
+<canvas id="FederationChart" class="federation-graph" width="400" height="400"></canvas>
 <div id="adminpage">
     <h1>{{$title}} - {{$page}}</h1>
     <p>{{$intro}}</p>
@@ -17,13 +17,40 @@
     </p>
 </div>
 <script>
-var FedData = [
+var FedData = {
+	datasets: [{
+        data: [
 {{foreach $counts as $c}}
-    { value: {{$c[0]['total']}}, label: "{{$c[0]['platform']}}", color: '{{$c[3]}}', highlight: "#EE90A1", },
+			{{$c[0]['total']}},
 {{/foreach}}
-];
+		],
+		backgroundColor: [
+{{foreach $counts as $c}}
+			'{{$c[3]}}',
+{{/foreach}}
+		],
+		hoverBackgroundColor: [
+{{foreach $counts as $c}}
+			'#EE90A1',
+{{/foreach}}
+		]
+    }],
+	labels: [
+{{foreach $counts as $c}}
+		"{{$c[0]['platform']}}",
+{{/foreach}}
+	]
+};
 var ctx = document.getElementById("FederationChart").getContext("2d");
-var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false, });
+var myDoughnutChart = new Chart(ctx, {
+	type: 'doughnut',
+	data: FedData,
+	options: {
+		legend: {display: false},
+		animation: {animateRotate: false},
+		responsive: false
+	}
+});
 </script>
 
 <table id="federation-stats">
@@ -36,15 +63,42 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
     </tr>
     <tr>
     <td colspan="3" class="federation-data">
-    <canvas id="{{$c[2]}}Chart" class="federation-network-graph"></canvas>
+    <canvas id="{{$c[2]}}Chart" class="federation-network-graph" width="240" height="240"></canvas>
     <script>
-    var {{$c[2]}}data = [
-    {{foreach $c[1] as $v}}
-	{ value: {{$v['total']}}, label: '{{$v['version']}}', color: "{{$c[3]}}", highlight: "#EE90A1",},
-    {{/foreach}}
-    ];
+	var {{$c[2]}}data = {
+		datasets: [{
+			data: [
+	{{foreach $c[1] as $v}}
+				{{$v['total']}},
+	{{/foreach}}
+			],
+			backgroundColor: [
+	{{foreach $c[1] as $v}}
+				'{{$c[3]}}',
+	{{/foreach}}
+			],
+			hoverBackgroundColor: [
+	{{foreach $c[1] as $v}}
+				'#EE90A1',
+	{{/foreach}}
+			]
+		}],
+		labels: [
+	{{foreach $c[1] as $v}}
+			'{{$v['version']}}',
+	{{/foreach}}
+		]
+	};
     var ctx = document.getElementById("{{$c[2]}}Chart").getContext("2d");
-    var my{{$c[2]}}DoughnutChart = new Chart(ctx).Doughnut({{$c[2]}}data, {animateRotate : false,});
+	var my{{$c[2]}}DoughnutChart = new Chart(ctx, {
+		type: 'doughnut',
+		data: {{$c[2]}}data,
+		options: {
+			legend: {display: false},
+			animation: {animateRotate: false},
+			responsive: false
+		}
+	});
     </script>
     <ul class="federation-stats">
     {{foreach $c[1] as $v}}
@@ -55,4 +109,4 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
     </tr>
     {{/if}}
 {{/foreach}}
-</table>
+</table>
\ No newline at end of file