Add a wrapper to catch chart rendering before chartkick is loaded

app/javascript/components/Chartkick.js

@@ -1,6 +1,6 @@
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
-import { toggle, delegate } from '@utils';
+import { toggle, delegate, fire } from '@utils';
 
 export default function () {
   return null;
@@ -34,3 +34,4 @@ delegate('click', '[data-toggle-chart]', toggleChart);
 
 Chartkick.use(Highcharts);
 window.Chartkick = Chartkick;
+fire(window, 'chartkick:ready');

app/javascript/new_design/chartkick.js

@@ -0,0 +1,41 @@
+// Ruby chartkick helper implementation assumes Chartkick is already loaded.
+// It has no way to delay execution. So we wrap all the Chartkick classes
+// to queue rendering for when Chartkick is loaded.
+
+class AreaChart {
+  constructor(...args) {
+    charts.add(['AreaChart', args]);
+  }
+}
+
+class PieChart {
+  constructor(...args) {
+    charts.add(['PieChart', args]);
+  }
+}
+
+class LineChart {
+  constructor(...args) {
+    charts.add(['LineChart', args]);
+  }
+}
+
+class ColumnChart {
+  constructor(...args) {
+    charts.add(['ColumnChart', args]);
+  }
+}
+
+const charts = new Set();
+
+function initialize() {
+  for (const [ChartType, args] of charts) {
+    new window.Chartkick[ChartType](...args);
+  }
+  charts.clear();
+}
+
+if (!window.Chartkick) {
+  window.Chartkick = { AreaChart, PieChart, LineChart, ColumnChart };
+  addEventListener('chartkick:ready', initialize);
+}

app/javascript/packs/application.js

@@ -13,6 +13,7 @@ import '../shared/remote-input';
 import '../shared/franceconnect';
 import '../shared/toggle-target';
 
+import '../new_design/chartkick';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';