diff --git a/addons/board/static/src/legacy/js/board_view.js b/addons/board/static/src/legacy/js/board_view.js
index d0cb35da927..e1125a2bd29 100644
--- a/addons/board/static/src/legacy/js/board_view.js
+++ b/addons/board/static/src/legacy/js/board_view.js
@@ -13,6 +13,7 @@ var FormView = require('web.FormView');
 var pyUtils = require('web.py_utils');
 var session  = require('web.session');
 var viewRegistry = require('web.view_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -34,6 +35,12 @@ var BoardController = FormController.extend({
         this.customViewID = params.customViewID;
     },
 
+    async willStart() {
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        return _super();
+    },
+
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
diff --git a/addons/stock/static/src/js/report_stock_forecasted.js b/addons/stock/static/src/js/report_stock_forecasted.js
index 017fb1e5332..4258c6c027d 100644
--- a/addons/stock/static/src/js/report_stock_forecasted.js
+++ b/addons/stock/static/src/js/report_stock_forecasted.js
@@ -1,24 +1,16 @@
 odoo.define('stock.ReplenishReport', function (require) {
 "use strict";
 
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
+
 const clientAction = require('report.client_action');
 const core = require('web.core');
 const dom = require('web.dom');
-const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
-const GraphView = require('web.GraphView');
 
 const qweb = core.qweb;
 const _t = core._t;
 
-class StockReportGraphRenderer extends GraphRenderer {}
-
-StockReportGraphRenderer.template = "stock.GraphRenderer";
-
-const StockReportGraphView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        Renderer: StockReportGraphRenderer,
-    }),
-});
+const viewRegistry = require("web.view_registry");
 
 const ReplenishReport = clientAction.extend({
     /**
@@ -56,7 +48,8 @@ const ReplenishReport = clientAction.extend({
         });
         return Promise.all([
             this._super.apply(this, arguments),
-            loadWarehouses
+            loadWarehouses,
+            loadLegacyViews({ rpc: this._rpc.bind(this) }),
         ]);
     },
 
@@ -125,9 +118,24 @@ const ReplenishReport = clientAction.extend({
             noContentHelp: _t("Try to add some incoming or outgoing transfers."),
             withControlPanel: false,
         };
-        const graphView = new StockReportGraphView(viewInfo, params);
+        const GraphView = viewRegistry.get("graph");
+        const graphView = new GraphView(viewInfo, params);
         const graphController = await graphView.getController(this);
         await graphController.appendTo(document.createDocumentFragment());
+
+        // Since we render the container in a fragment, we may endup in this case:
+        // https://github.com/chartjs/Chart.js/issues/2210#issuecomment-204984449
+        // so, the canvas won't be resizing when it is relocated in the iframe.
+        // Also, since the iframe's position is absolute, chartJS reiszing may not work
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Important Note)
+        // Finally, we do want to set a height for the canvas rendering in chartJS.
+        // We do this via the chartJS API, that is legacy/graph_renderer.js:@_prepareOptions
+        //  (maintainAspectRatio = false) and with the *attribute* height (not the style).
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Responsive Charts)
+        // Luckily, the chartJS is not fully rendered, so changing the height here is relevant.
+        // It wouldn't be if we were after GraphRenderer@mounted.
+        graphController.el.querySelector(".o_graph_canvas_container canvas").height = "300";
+
         return graphController;
     },
 
diff --git a/addons/stock/static/src/xml/report_stock_forecasted.xml b/addons/stock/static/src/xml/report_stock_forecasted.xml
index 8f8110cc3d2..2c294cf4b09 100644
--- a/addons/stock/static/src/xml/report_stock_forecasted.xml
+++ b/addons/stock/static/src/xml/report_stock_forecasted.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="stock.GraphRenderer" owl="1" t-inherit="web.Legacy.GraphRenderer" t-inherit-mode="primary">
-    <xpath expr="//canvas[@t-ref='canvas']" position="attributes">
-        <attribute name="height">300</attribute>
-    </xpath>
-</t>
-
 <button t-name="replenish_report_buttons"
     class="btn btn-primary o_report_replenish_buy"
     type="button" title="Replenish">
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 84add579bda..d17c503c245 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -19,6 +19,7 @@ This module provides the core of the Odoo Web Client.
         'views/report_templates.xml',
         'views/base_document_layout_views.xml',
         'views/speedscope_template.xml',
+        'views/lazy_assets.xml',
         'data/report_layout.xml',
     ],
     'assets': {
@@ -183,6 +184,19 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/js/env.js',
             'web/static/src/legacy/js/model.js',
             'web/static/src/legacy/js/owl_compatibility.js',
+            ("remove", 'web/static/src/legacy/js/views/graph/**/*'),
+            ("remove", 'web/static/src/legacy/scss/graph_view.scss'),
+            ("remove", 'web/static/src/legacy/js/views/pivot/**/*'),
+        ],
+        "web.assets_backend_legacy_lazy": [
+            ("include", "web._assets_helpers"),
+            ('include', 'web._assets_backend_helpers'),
+            'web/static/lib/bootstrap/scss/_variables.scss',
+            # graph
+            'web/static/src/legacy/js/views/graph/**/*',
+            'web/static/src/legacy/scss/graph_view.scss',
+            # pivot
+            'web/static/src/legacy/js/views/pivot/**/*',
         ],
         'web.assets_frontend_minimal': [
             'web/static/src/legacy/js/public/lazyloader.js',
@@ -471,6 +485,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/bootstrap/scss/_variables.scss',
 
             ('include', 'web.frontend_legacy'),
+            ("include", "web.assets_backend_legacy_lazy"),
         ],
         'web.qunit_suite_tests': [
             'base/static/tests/base_settings_tests.js',
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_view.js b/addons/web/static/src/legacy/js/views/graph/graph_view.js
index 99863a9270c..41747f93fe4 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_view.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_view.js
@@ -13,6 +13,7 @@ var GraphModel = require('web.GraphModel');
 var Controller = require('web.GraphController');
 const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
 const RendererWrapper = require("web.RendererWrapper");
+const viewRegistry = require("web.view_registry");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -168,6 +169,7 @@ var GraphView = AbstractView.extend({
     },
 });
 
+viewRegistry.add("graph", GraphView);
 return GraphView;
 
 });
diff --git a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
index 889b5f36dff..3f410338ac2 100644
--- a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
+++ b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
@@ -14,6 +14,7 @@
     import PivotRenderer from './pivot_renderer';
     import RendererWrapper from 'web.RendererWrapper';
     import { sortBy } from 'web.utils';
+    import viewRegistry from "web.view_registry";
 
     const _t = core._t;
     const _lt = core._lt;
@@ -159,5 +160,6 @@
             return new RendererWrapper(parent, this.config.Renderer, state);
         },
     });
+    viewRegistry.add("pivot", PivotView);
 
     export default PivotView;
diff --git a/addons/web/static/src/legacy/js/views/view_registry.js b/addons/web/static/src/legacy/js/views/view_registry.js
index f936787ba1a..2e34705e830 100644
--- a/addons/web/static/src/legacy/js/views/view_registry.js
+++ b/addons/web/static/src/legacy/js/views/view_registry.js
@@ -26,10 +26,8 @@ odoo.define('web._view_registry', function (require) {
  */
 
 var FormView = require('web.FormView');
-var GraphView = require('web.GraphView');
 var KanbanView = require('web.KanbanView');
 var ListView = require('web.ListView');
-var PivotView = require('web.PivotView');
 var CalendarView = require('web.CalendarView');
 var view_registry = require('web.view_registry');
 
@@ -37,8 +35,5 @@ view_registry
     .add('form', FormView)
     .add('list', ListView)
     .add('kanban', KanbanView)
-    .add('graph', GraphView)
-    .add('pivot', PivotView)
     .add('calendar', CalendarView);
-
 });
diff --git a/addons/web/static/src/legacy/js/widgets/pie_chart.js b/addons/web/static/src/legacy/js/widgets/pie_chart.js
index 35ead6b4b38..4fafd7a5c64 100644
--- a/addons/web/static/src/legacy/js/widgets/pie_chart.js
+++ b/addons/web/static/src/legacy/js/widgets/pie_chart.js
@@ -10,6 +10,7 @@ var Domain = require('web.Domain');
 var viewRegistry = require('web.view_registry');
 var Widget = require('web.Widget');
 var widgetRegistry = require('web.widget_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
 
 var qweb = core.qweb;
 
@@ -66,9 +67,11 @@ var PieChart = Widget.extend({
      *
      * @override
      */
-    willStart: function () {
+    willStart: async function () {
         var self = this;
-        var def1 = this._super.apply(this, arguments);
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        var def1 = _super();
 
         var SubView = viewRegistry.get('graph');
         var subView = new SubView(this.viewInfo, this.subViewParams);
diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index 12d70f774f4..f0c02eafaf4 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -14,6 +14,7 @@ import {
 } from "./backend_utils";
 import { setScrollPosition } from "../core/utils/scrolling";
 import { registry } from "@web/core/registry";
+import { loadPublicAsset } from "@web/core/assets";
 
 const viewRegistry = registry.category("views");
 
@@ -159,3 +160,15 @@ for (const [name, action] of Object.entries(legacyViewRegistry.entries())) {
     registerView(name, action);
 }
 legacyViewRegistry.onAdd(registerView);
+
+export async function loadLegacyViews({ orm, rpc }) {
+    if (!orm && rpc) {
+        orm = {
+            call: (...callArgs) => {
+                const [model, method, args = [], kwargs = {}] = callArgs;
+                return rpc({ model, method, args, kwargs });
+            },
+        };
+    }
+    await loadPublicAsset("web.assets_backend_legacy_lazy", orm);
+}
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index 0158077add4..8ed615e7f83 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -416,6 +416,9 @@ export class MockServer {
             return;
         }
         switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
             case "create":
                 return this.mockCreate(args.model, args.args[0]);
             case "fields_get":
diff --git a/addons/web/static/tests/legacy/helpers/mock_server.js b/addons/web/static/tests/legacy/helpers/mock_server.js
index 7b26051df9c..64ef35c9fcf 100644
--- a/addons/web/static/tests/legacy/helpers/mock_server.js
+++ b/addons/web/static/tests/legacy/helpers/mock_server.js
@@ -1957,6 +1957,9 @@ var MockServer = Class.extend({
             return;
         }
         switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
             case 'copy':
                 return this._mockCopy(args.model, args.args[0]);
 
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index abfdbc7e525..dc454059e00 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -9807,7 +9807,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('reload a form view with a pie chart does not crash', async function (assert) {
-        assert.expect(2);
+        assert.expect(3);
 
         const form = await createView({
             View: FormView,
@@ -9816,6 +9816,13 @@ QUnit.module('Views', {
             arch: `<form>
                       <widget name="pie_chart" title="qux by product" attrs="{'measure': 'qux', 'groupby': 'product_id'}"/>
                   </form>`,
+            mockRPC(route, args) {
+                if (args.method === "render_public_asset") {
+                    assert.deepEqual(args.args, ["web.assets_backend_legacy_lazy"]);
+                    return Promise.resolve(true);
+                }
+                return this._super(...arguments);
+            }
         });
 
         assert.containsOnce(form, '.o_widget');
diff --git a/addons/web/views/lazy_assets.xml b/addons/web/views/lazy_assets.xml
new file mode 100644
index 00000000000..20b3a6792cb
--- /dev/null
+++ b/addons/web/views/lazy_assets.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+  <template id="assets_backend_legacy_lazy" name="Lazy assets for legacy Views" groups="base.group_user">
+    <t t-call-assets="web.assets_backend_legacy_lazy" />
+  </template>
+
+</odoo>