diff --git a/addons/web/static/src/js/views/graph_widget.js b/addons/web/static/src/js/views/graph_widget.js
index 989db33c289..340050eb0dc 100644
--- a/addons/web/static/src/js/views/graph_widget.js
+++ b/addons/web/static/src/js/views/graph_widget.js
@@ -1,6 +1,7 @@
 odoo.define('web.GraphWidget', function (require) {
 "use strict";
 
+var config = require('web.config');
 var core = require('web.core');
 var Model = require('web.DataModel');
 var Widget = require('web.Widget');
@@ -8,6 +9,9 @@ var Widget = require('web.Widget');
 var _t = core._t;
 var QWeb = core.qweb;
 
+// hide top legend when too many item for device size
+var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
+
 return Widget.extend({
     init: function (parent, model, options) {
         this._super(parent);
@@ -159,7 +163,7 @@ return Widget.extend({
         chart.options({
           delay: 250,
           transition: 10,
-          showLegend: true,
+          showLegend: _.size(data) <= MAX_LEGEND_LENGTH,
           showXAxis: true,
           showYAxis: true,
           rightAlignYAxis: false,
@@ -209,9 +213,13 @@ return Widget.extend({
 
         svg.transition().duration(100);
 
+        var legend_right = config.device.size_class > config.device.SIZES.XS;
+
         var chart = nv.models.pieChart();
         chart.options({
           delay: 250,
+          showLegend: legend_right || _.size(data) <= MAX_LEGEND_LENGTH,
+          legendPosition: legend_right ? 'right' : 'top',
           transition: 100,
           color: d3.scale.category10().range(),
         });
@@ -285,7 +293,7 @@ return Widget.extend({
         chart.options({
           margin: {left: 50, right: 50},
           useInteractiveGuideline: true,
-          showLegend: true,
+          showLegend: _.size(data) <= MAX_LEGEND_LENGTH,
           showXAxis: true,
           showYAxis: true,
         });