diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 09706695bbc..7de98b29e6b 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -174,12 +174,12 @@ return AbstractRenderer.extend({
             values = {};
             for (var i = 0; i < this.state.data.length; i++) {
                 label = this.state.data[i].labels[0];
-                serie = this.state.data[i].labels[1];
+                serie = this.state.data[i].labels.slice(1).join("/");
                 value = this.state.data[i].value;
                 if ((!xlabels.length) || (xlabels[xlabels.length-1] !== label)) {
                     xlabels.push(label);
                 }
-                series.push(this.state.data[i].labels[1]);
+                series.push(serie);
                 if (!(serie in values)) {values[serie] = {};}
                 values[serie][label] = this.state.data[i].value;
             }
@@ -403,7 +403,7 @@ return AbstractRenderer.extend({
                     ticksLabels.push(tickLabel);
                     tick++;
                 }
-                serie = graphData[i].labels[1];
+                serie = graphData[i].labels.slice(1).join("/");
                 if (!data_dict[serie]) {
                     data_dict[serie] = {
                         values: [],
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index d651afc030c..d9cec90bc4e 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -179,15 +179,36 @@ QUnit.module('Views', {
             model: 'foo',
             data: this.data,
             arch: '<graph type="line"><field name="foo" /></graph>',
-            groupBy: ['product_id', 'bar'],
+            groupBy: ['product_id', 'bar', 'color_id'],
         });
 
         assert.strictEqual(graph.$('.nv-x text:contains(xphone)').length, 1,
             "should contain a text element with product xphone on X axis");
         assert.strictEqual(graph.$('.nv-x text:contains(xpad)').length, 1,
             "should contain a text element with product xpad on X axis");
-        assert.strictEqual(graph.$('text:contains(true)').length, 1,
-            "should have an entry for each value of field 'bar' in the legend");
+        assert.strictEqual(graph.$('text.nv-legend-text:contains(true)').length, 2,
+            "should have an entry for each value of field 'bar' and 'color_id' in the legend");
+
+        graph.destroy();
+    });
+
+    QUnit.test('displaying bar chart data with multiple groupbys', function (assert) {
+        assert.expect(3);
+
+        var graph = createView({
+            View: GraphView,
+            model: 'foo',
+            data: this.data,
+            arch: '<graph type="bar"><field name="foo" /></graph>',
+            groupBy: ['product_id', 'bar', 'color_id'],
+        });
+
+        assert.containsOnce(graph, '.nv-x text:contains(xphone)',
+            "should contain a text element with product xphone on X axis");
+        assert.containsOnce(graph, '.nv-x text:contains(xpad)',
+            "should contain a text element with product xpad on X axis");
+        assert.containsOnce(graph, 'text.nv-legend-text:contains(true/red)',
+            "should have an entry for each value of field 'bar' and 'color_id' in the legend");
 
         graph.destroy();
     });