diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index ca57426fd2..a0d9d5450a 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -241,6 +241,7 @@ import {TaskPlannerComponent} from './projects/states/plan/task-planner/task-pla
 import {TaskPlannerCardComponent} from './projects/states/dashboard/directives/progress-dashboard/task-planner-card/task-planner-card.component';
 import {TaskOverseerReportComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-overseer-report/task-overseer-report.component';
 import {TutorNotesComponent} from './projects/states/tutor-notes/tutor-notes.component';
+import {VisualisationService} from './visualisations/visualisation.service';
 
 export const DoubtfireAngularJSModule = angular
   .module('doubtfire', [
@@ -613,3 +614,8 @@ DoubtfireAngularJSModule.directive(
   'fTutorNotes',
   downgradeComponent({component: TutorNotesComponent}),
 );
+
+DoubtfireAngularJSModule.factory(
+  'VisualisationServiceAngular',
+  downgradeInjectable(VisualisationService),
+);
diff --git a/src/app/visualisations/visualisation.service.ts b/src/app/visualisations/visualisation.service.ts
new file mode 100644
index 0000000000..e6c126f9ad
--- /dev/null
+++ b/src/app/visualisations/visualisation.service.ts
@@ -0,0 +1,98 @@
+import {Inject, Injectable} from '@angular/core';
+import {interval} from 'rxjs';
+import {take} from 'rxjs/operators';
+import {analyticsService} from '../ajs-upgraded-providers';
+
+type VisualisationOptions = Record<string, unknown>;
+type VisualisationConfig = Record<string, unknown>;
+type VisualisationTitle = Record<string, unknown> | undefined;
+type VisualisationSubtitle = Record<string, unknown> | undefined;
+
+export type VisualisationResult = [
+  {
+    chart: VisualisationOptions;
+    title: VisualisationTitle;
+    subtitle: VisualisationSubtitle;
+  },
+  VisualisationConfig,
+];
+
+@Injectable({
+  providedIn: 'root',
+})
+export class VisualisationService {
+  constructor(@Inject(analyticsService) private analytics: {event: (...args: unknown[]) => void}) {}
+
+  create(
+    type: string,
+    visualisationName: string,
+    opts?: VisualisationOptions,
+    conf?: VisualisationConfig,
+    titleOpts?: VisualisationTitle,
+    subtitleOpts?: VisualisationSubtitle,
+  ): VisualisationResult {
+    const defaultOpts: VisualisationOptions = {
+      objectequality: true,
+      interactive: true,
+      showValues: true,
+      showXAxis: true,
+      showYAxis: true,
+      showLegend: true,
+      transitionDuration: 500,
+      duration: 500,
+      height: 600,
+      color: [
+        '#1f77b4',
+        '#ff7f0e',
+        '#2ca02c',
+        '#d62728',
+        '#9467bd',
+        '#8c564b',
+        '#e377c2',
+        '#7f7f7f',
+        '#bcbd22',
+        '#17becf',
+      ],
+    };
+
+    const defaultConfig: VisualisationConfig = {
+      visible: true,
+      extended: false,
+      disabled: false,
+      autorefresh: true,
+      refreshDataOnly: true,
+      deepWatchOptions: true,
+      deepWatchData: false,
+      deepWatchConfig: true,
+      debounce: 10,
+    };
+
+    const dirtyOpts: VisualisationOptions = {
+      ...defaultOpts,
+      ...(opts ?? {}),
+      type,
+    };
+
+    const dirtyConf: VisualisationConfig = {
+      ...defaultConfig,
+      ...(conf ?? {}),
+    };
+
+    this.analytics.event('Visualisations', 'Created Visualisation', visualisationName);
+
+    return [
+      {
+        chart: dirtyOpts,
+        title: titleOpts,
+        subtitle: subtitleOpts,
+      },
+      dirtyConf,
+    ];
+  }
+
+  refreshAll(): void {
+    interval(50).pipe(take(1)).subscribe(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+  }
+}
diff --git a/src/app/visualisations/visualisations.coffee b/src/app/visualisations/visualisations.coffee
index f7882be92e..5ac84de70c 100644
--- a/src/app/visualisations/visualisations.coffee
+++ b/src/app/visualisations/visualisations.coffee
@@ -11,57 +11,19 @@ angular.module('doubtfire.visualisations', [
   'doubtfire.visualisations.achievement-custom-bar-chart'
 ])
 
-.factory('Visualisation', ($interval, analyticsService) ->
+.factory('Visualisation', (VisualisationServiceAngular) ->
   Visualisation = (type, visualisationName, opts, conf, titleOpts, subtitleOpts) ->
-    DEFAULT_OPTS =
-      objectequality: yes
-      interactive: yes
-      # tooltips: yes
-      showValues: yes
-      showXAxis: yes
-      showYAxis: yes
-      showLegend: yes
-      transitionDuration: 500
-      duration: 500
-      height: 600
-      color: [
-        "#1f77b4"
-        "#ff7f0e"
-        "#2ca02c"
-        "#d62728"
-        "#9467bd"
-        "#8c564b"
-        "#e377c2"
-        "#7f7f7f"
-        "#bcbd22"
-        "#17becf"
-      ]
-
-    DEFAULT_CONF = {
-      visible: true, # default: true
-      extended: false, # default: false
-      disabled: false, # default: false
-      autorefresh: true, # default: true
-      refreshDataOnly: true, # default: true
-      deepWatchOptions: true, # default: true
-      deepWatchData: false, # default: false
-      deepWatchConfig: true, # default: true
-      debounce: 10 # default: 10
-    }
-
-    dirtyOpts = angular.extend {}, DEFAULT_OPTS, opts
-    dirtyOpts.type = type
-
-    dirtyConf = angular.extend {}, DEFAULT_CONF, conf
-
-    # Google tracking
-    analyticsService.event 'Visualisations', 'Created Visualisation', visualisationName
-
-    [ { chart: dirtyOpts, title: titleOpts, subtitle: subtitleOpts },  dirtyConf ]
-
+    VisualisationServiceAngular.create(
+      type,
+      visualisationName,
+      opts,
+      conf,
+      titleOpts,
+      subtitleOpts
+    )
 
   Visualisation.refreshAll = ->
-    $interval (-> window.dispatchEvent(new Event('resize'))), 50, 1
+    VisualisationServiceAngular.refreshAll()
 
   Visualisation
 )