diff --git a/projects/planner/src/app/app.module.ts b/projects/planner/src/app/app.module.ts
index f26f8836..c436bc51 100644
--- a/projects/planner/src/app/app.module.ts
+++ b/projects/planner/src/app/app.module.ts
@@ -102,6 +102,8 @@ import { ProfileComparatorService } from './shared/diff/profileComparatorService
 import { GasesComparisonService } from './shared/diff/gases-comparison.service';
 import { ResultsComparison } from './shared/diff/results-comparison.service';
 import { SelectedDiffWaypoint } from './shared/diff/selected-diff-waypoint.service';
+import { ChartPlotterFactory } from './shared/chartPlotter';
+import { ResamplingService } from "./shared/ResamplingService";
 
 const ANGULAR_MODULES = [
     AppRoutingModule,
@@ -209,7 +211,9 @@ const SERVICES = [
     WayPointsService,
     ProfileComparatorService,
     GasesComparisonService,
-    ResultsComparison
+    ResultsComparison,
+    ResamplingService,
+    ChartPlotterFactory
 ];
 
 @NgModule({
diff --git a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.spec.ts b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.spec.ts
index e1568edf..ed23ea26 100644
--- a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.spec.ts
+++ b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.spec.ts
@@ -7,6 +7,7 @@ import { SelectedWaypoint } from '../../shared/selectedwaypointService';
 import { DiveSchedules } from '../../shared/dive.schedules';
 import { ReloadDispatcher } from '../../shared/reloadDispatcher';
 import { SelectedDiffWaypoint } from '../../shared/diff/selected-diff-waypoint.service';
+import { ChartPlotterFactory } from '../../shared/chartPlotter';
 
 describe('ProfileDifferenceChartComponent', () => {
     let component: ProfileDifferenceChartComponent;
@@ -23,6 +24,7 @@ describe('ProfileDifferenceChartComponent', () => {
                 DiveSchedules,
                 ReloadDispatcher,
                 SelectedDiffWaypoint,
+                ChartPlotterFactory
             ]
         });
         fixture = TestBed.createComponent(ProfileDifferenceChartComponent);
diff --git a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts
index 4c3c56c3..d0f44d1f 100644
--- a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts
+++ b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts
@@ -21,13 +21,11 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
     private plotter: ChartPlotter;
 
     constructor(
-        private units: UnitConversion,
+        chartPlotterFactory: ChartPlotterFactory,
         private selectedWaypoints: SelectedDiffWaypoint,
         private profileComparatorService: ProfileComparatorService) {
         super();
 
-        const resampling = new ResamplingService(units);
-        const chartPlotterFactory = new ChartPlotterFactory(resampling, this.units);
         const profileATraces = chartPlotterFactory.wthNamePrefix('Profile A ')
             .create(() => this.profileA);
         const profileBTraces = chartPlotterFactory
@@ -39,7 +37,7 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
             .wthEventLineColor('rgb(118,119,120)')
             .create(() => this.profileB);
 
-        this.plotter = new ChartPlotter('diveplot', this.units, profileBTraces, profileATraces);
+        this.plotter = new ChartPlotter('diveplot', chartPlotterFactory, profileBTraces, profileATraces);
 
         this.profileComparatorService.selectionChanged$.pipe(takeUntil(this.unsubscribe$))
             .subscribe(() => {
diff --git a/projects/planner/src/app/shared/chartPlotter.ts b/projects/planner/src/app/shared/chartPlotter.ts
index e5794b29..ce928f24 100644
--- a/projects/planner/src/app/shared/chartPlotter.ts
+++ b/projects/planner/src/app/shared/chartPlotter.ts
@@ -1,13 +1,15 @@
+import { Injectable } from '@angular/core';
+import * as Plotly from 'plotly.js-basic-dist';
+import _ from 'lodash';
 import { UnitConversion } from './UnitConversion';
 import { ResamplingService } from './ResamplingService';
 import { DiveResults } from './diveresults';
-import * as Plotly from 'plotly.js-basic-dist';
 import { DateFormats } from './formaters';
 import { WayPoint } from './models';
 import { Ceiling, Event } from 'scuba-physics';
-import _ from 'lodash';
 
 // TODO merge with profileChart component drawing methods
+@Injectable()
 export class ChartPlotterFactory {
     public static readonly depthLineColorA = 'rgb(31, 119, 180)';
     public static readonly depthLineColorB = 'rgb(141, 143, 144)';
@@ -250,10 +252,8 @@ export class ChartPlotter {
     private layout: Partial<Plotly.Layout>;
 
     /** Provide traces in reverse order to keep the last on top */
-    constructor(public elementName: string, private units: UnitConversion, ...traceBuilders: DiveTracesBuilder[]) {
+    constructor(public elementName: string, chartPlotterFactory: ChartPlotterFactory, ...traceBuilders: DiveTracesBuilder[]) {
         this.builders = traceBuilders;
-        const resampling = new ResamplingService(units);
-        const chartPlotterFactory = new ChartPlotterFactory(resampling, this.units);
         this.cursor1 = chartPlotterFactory.createCursor();
         this.layout = chartPlotterFactory.createLayout();
         this.options = chartPlotterFactory.createOptions();