diff --git a/Thermo.Active/wwwroot/assets/styles/base/setup.less b/Thermo.Active/wwwroot/assets/styles/base/setup.less
index 653fad4d..8c7db1e4 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/setup.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/setup.less
@@ -119,7 +119,7 @@
 
               div {
                 display: grid;
-                grid-template-columns: auto 1f auto;
+                grid-template-columns: auto 1fr auto;
 
                 img {
                   grid-column: 1;
@@ -407,7 +407,6 @@ article {
   &.transparent {
     .body {
       border: none;
-
     }
   }
 
@@ -420,6 +419,14 @@ article {
     width: 500px;
   }
 
+  &.color_2{
+    background-color: #e5f3ff;
+  }
+
+  &.color_3{
+    background-color: #b3dbff;
+  }
+
   .header {
     display: flex;
     align-items: center;
@@ -443,8 +450,6 @@ article {
     border: 2px solid #979797;
   }
 
-
-
   .submit {
     margin: auto;
     width: 90px;
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 7bca4547..41337e6b 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -104,7 +104,7 @@
 }
 .setup .modal section.body section article .svg-area .borded_label div {
   display: grid;
-  grid-template-columns: auto 1f auto;
+  grid-template-columns: auto 1fr auto;
 }
 .setup .modal section.body section article .svg-area .borded_label div img {
   grid-column: 1;
@@ -333,6 +333,12 @@ article .box .body {
 .box.box-500 {
   width: 500px;
 }
+.box.color_2 {
+  background-color: #e5f3ff;
+}
+.box.color_3 {
+  background-color: #b3dbff;
+}
 .box .header {
   display: flex;
   align-items: center;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/@types/svgChart.bar.d.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/@types/svgChart.bar.d.ts
new file mode 100644
index 00000000..68f0e061
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/@types/svgChart.bar.d.ts
@@ -0,0 +1,8 @@
+declare module svg {
+  interface BarChartInfo {
+    borderColor: string;
+    backgroundColor: string;
+    width: number;
+    height: number;
+  }
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.ts
new file mode 100644
index 00000000..cbfd056d
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.ts
@@ -0,0 +1,37 @@
+import Component from "vue-class-component";
+
+import Vue from "vue";
+import { Prop } from "vue-property-decorator";
+
+@Component({})
+export default class SVGChart extends Vue {
+
+  @Prop()
+  lineBarColor: string;
+
+  @Prop({ default: [] })
+  bars: svg.BarChartInfo[];
+
+  step: number = 50;
+
+  startXOf(barindex: number) {
+    return this.bars.slice(0, barindex).reduce((p, c) => c.width + p, 0);
+  }
+
+  get maxX() {
+    return Math.max(this.bars.reduce((p, c) => c.width + p, 0), 1);
+  }
+
+  get maxY() {
+    return Math.max(...this.bars.map(i => i.height), 1);
+  }
+
+  scaleX(value: number) {
+    return value * 1000 / this.maxX;
+  }
+
+  scaleY(value: number) {
+    return value * 1000 / this.maxY;
+  }
+}
+
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.vue
new file mode 100644
index 00000000..e1518a79
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="chart">
+		<svg :viewBox="`-1 -1 ${scaleX(maxX) * 1.2} ${scaleY(maxY) * 1.2}`">
+			<g>
+				<line
+					:x1="-step"
+					:y1="scaleY(maxY) * 1.1 - step"
+					:y2="scaleY(maxY) * 1.1 - step"
+					:x2="scaleX(maxX) * 1.1"
+					:stroke="lineBarColor"
+				/>
+				<line x1="0" :y1="-step" x2="0" :y2="scaleY(maxY) * 1.1" :stroke="lineBarColor" />
+			</g>
+			<rect
+				v-for="(b, idx) in bars"
+				:key="idx"
+				:y="scaleY(maxY) * 1.1 - step - scaleY(b.height)"
+				:x="scaleX(startXOf(idx))"
+				:width="scaleX(b.width)"
+				:height="scaleY(b.height)"
+				:fill="b.backgroundColor"
+				:stroke="b.borderColor"
+			/>
+		</svg>
+	</div>
+</template>
+<style>
+.chart {
+	overflow: hidden;
+}
+
+.chart svg {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<script src="./svgChart.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.ts
similarity index 90%
rename from Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts
rename to Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.ts
index 27127d22..58fb1bca 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.ts
@@ -3,19 +3,17 @@ import { Modal, ModalHelper } from "@/components/modals";
 import { Factory, messageService, awaiter } from "@/_base";
 import Component from "vue-class-component";
 import { Prop } from 'vue-property-decorator';
-import Tastierino from "@/app_modules_thermo/components/tastierino.vue";
 import { appModelActions } from "@/store/app.store";
 
 @Component({
   components: {
     modal: Modal,
-    tastierino: Tastierino
   }
 })
 export default class AvvioProduzione extends Vue {
 
   enabling: boolean = true;
-  @Prop({})
+  @Prop({default:0})
   pieces: number;
 
   mock_pieces: number = this.pieces;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.vue
similarity index 72%
rename from Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue
rename to Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.vue
index db43aff0..b83046b4 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/avvio-produzione/avvio-produzione.vue
@@ -7,18 +7,16 @@
 				</button>
 			</div>
             <section>
-                <div class="specific">
+                <article>
                     <div class="input-area">
                         <label>{{'enabling'|localize('Settaggio numero pezzi')}}</label>
                         <toggle-button v-model="enabling"></toggle-button>
                     </div>
-                    <img class="disabled" src="assets/icons/png/tast-disable.png" v-if="!enabling">
-                    <div class="input-area" v-if="enabling">
+                    <div class="input-area">
                         <label>{{'mock_pieces'|localize('Numero pezzi')}}</label>
-                        <numeric v-model="mock_pieces"/>
+                        <numeric v-model="mock_pieces" v-if="enabling"/>
                     </div>
-                    <tastierino v-if="enabling"></tastierino>
-                </div>
+                </article>
             </section>
 			<footer>
 				<button class="btn" @click="annulla()">Annulla</button>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.ts
index cd327318..e00f0b84 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.ts
@@ -15,7 +15,7 @@ import ShowEstrazioneInfo from "@/app_modules_thermo/setup/estrazione/components
 import ShowVuotoInfo from "@/app_modules_thermo/setup/vuoto/show-vuoto-info.vue";
 import ShowImbutituraInfo from "@/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue";
 import ShowOpzioniInfo from "@/app_modules_thermo/setup/opzioni/show-opzioni-info.vue";
-import AvvioProduzione from "@/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue";
+import AvvioProduzione from "@/app_modules_thermo/setup/avvio-produzione/avvio-produzione.vue";
 import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue";
 
 
@@ -50,6 +50,7 @@ export default class Setup extends Vue {
       case 8: return ModalHelper.ShowModalAsync(ShowVuotoInfo);
       case 9: return ModalHelper.ShowModalAsync(ShowEstrazioneInfo);
       case 10: return ModalHelper.ShowModalAsync(ShowOpzioniInfo);
+      case 11: return ModalHelper.ShowModalAsync(AvvioProduzione);
     }
 
     return null;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
index e776b49e..a10dcd4e 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue
@@ -79,7 +79,7 @@
 					statusImage="fa fa-check-circle undone-step"
 				></setup-button>
 
-				<div class="setup-play" @click="sendMessage('show-avvio-produzione-info')">
+				<div class="setup-play" @click="showModalAtStep(11);">
 					<img class="dim" src="assets/icons/svg/setup-play.svg" />
 				</div>
 			</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.ts
index 08d136b8..38e0d94f 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.ts
@@ -3,11 +3,33 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
-
-@Component({ name: "ariacontrostampo", components: { scheda: Scheda, slider: Slider } })
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
+@Component({ name: "ariacontrostampo", components: {scheda: Scheda, slider: Slider, svgChart } })
 export default class AriaControstampo extends Vue {
-
   @Prop()
   recipe: Recipe.IRecipe;
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#fff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_air_1_chart_setpointx.setpointHMI,
+        width: this.recipe.upperplate_air_1_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#e5f3ff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_air_2_chart_setpointx.setpointHMI, 
+        width: this.recipe.upperplate_air_2_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_air_3_chart_setpointx.setpointHMI, 
+        width: this.recipe.upperplate_air_3_chart_setpointy.setpointHMI 
+      }
+    ] as svg.BarChartInfo[]
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
index cd042101..8a026cdb 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/aria-controstampo.vue
@@ -29,17 +29,18 @@
 				:durata="recipe.upperplate_air_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_2"
 				:portata="recipe.upperplate_air_2_chart_setpointx"
 				:durata="recipe.upperplate_air_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_3"
 				:portata="recipe.upperplate_air_3_chart_setpointx"
 				:durata="recipe.upperplate_air_3_chart_setpointy"
 			></scheda>
 		</article>
 		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
 			<div class="box transparent center box-500">
 				<div class="body">
 					<div class="input-area">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.ts
index 99cfaaa4..c993e6ad 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.ts
@@ -3,11 +3,23 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
-@Component({ name: "estrazionecontrostampo", components: { scheda: Scheda, slider: Slider } })
+@Component({ name: "estrazionecontrostampo", components: { scheda: Scheda, slider: Slider,svgChart } })
 export default class EstrazioneControstampo extends Vue {
 
   @Prop()
   recipe: Recipe.IRecipe;
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_extraction_1_chart_setpointx.setpointHMI,
+        width: this.recipe.upperplate_extraction_1_chart_setpointy.setpointHMI
+      }
+    ] as svg.BarChartInfo[]
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
index cceab82c..8f213c50 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/estrazione-controstampo.vue
@@ -24,11 +24,14 @@
 		<hr />
 		<article class="shrink ml-10">
 			<scheda
-				class="box-500"
+				class="box-500  color_3"
 				:portata="recipe.upperplate_extraction_1_chart_setpointx"
 				:durata="recipe.upperplate_extraction_1_chart_setpointy"
 			></scheda>
 		</article>
+		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
+		</article>
 	</section>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.ts
index a79b96f1..3687be3e 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.ts
@@ -3,11 +3,35 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
-@Component({ name: "vuotocontrostampo", components: { scheda: Scheda, slider: Slider } })
+@Component({ name: "vuotocontrostampo", components: { scheda: Scheda, slider: Slider,svgChart } })
 export default class VuotoControstampo extends Vue {
 
   @Prop()
   recipe: Recipe.IRecipe;
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#fff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_vacuum_1_chart_setpointx.setpointHMI,
+        width: this.recipe.upperplate_vacuum_1_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#e5f3ff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_vacuum_2_chart_setpointx.setpointHMI, 
+        width: this.recipe.upperplate_vacuum_2_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.upperplate_vacuum_3_chart_setpointx.setpointHMI, 
+        width: this.recipe.upperplate_vacuum_3_chart_setpointy.setpointHMI 
+      }
+    ] as svg.BarChartInfo[]
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
index eef51a2b..b054c859 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/controstampo_setup/components/base-components/vuoto-controstampo.vue
@@ -29,17 +29,18 @@
 				:durata="recipe.upperplate_vacuum_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_2"
 				:portata="recipe.upperplate_vacuum_2_chart_setpointx"
 				:durata="recipe.upperplate_vacuum_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_3"
 				:portata="recipe.upperplate_vacuum_3_chart_setpointx"
 				:durata="recipe.upperplate_vacuum_3_chart_setpointy"
 			></scheda>
 		</article>
 		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
 			<div class="box transparent center box-500">
 				<div class="body">
 					<div class="input-area">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.ts
index 2501739d..9af11d72 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.ts
@@ -3,15 +3,29 @@ import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
 import Slider from "@/app_modules_thermo/components/slider.vue"
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
 @Component({name:"estrprincipale", 
 components:{
 scheda:Scheda,
-slider:Slider}})
+slider:Slider,
+svgChart
+}})
 
 export default class EstrazionePrincipale extends Vue{
 
     @Prop()
     recipe:Recipe.IRecipe;
 
+    get bars() {
+        return [
+          { 
+            backgroundColor: "#b3dbff", 
+            borderColor: "#848484", 
+            height: this.recipe.extraction_main_1_chart_setpointx.setpointHMI,
+            width: this.recipe.extraction_main_1_chart_setpointy.setpointHMI
+          }
+        ] as svg.BarChartInfo[]
+      }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.vue
index c201652e..032d5747 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-principale.vue
@@ -29,11 +29,14 @@
 		<hr />
 		<article class="ml-10">
 			<scheda
-				class="box-500"
+				class="box-500 color_3"
 				:portata="recipe.extraction_main_1_chart_setpointx"
 				:durata="recipe.extraction_main_1_chart_setpointy"
 			></scheda>
 		</article>
+		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
+		</article>
 	</section>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.ts
index c80a589b..92c3851c 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.ts
@@ -3,11 +3,13 @@ import Component from 'vue-class-component';
 import {Prop} from 'vue-property-decorator';
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
 import Slider from "@/app_modules_thermo/components/slider.vue"
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
 @Component({name:"estrsecondaria", 
 components:{
 scheda:Scheda,
-slider:Slider
+slider:Slider,
+svgChart
 }})
 
 export default class EstrazioneSecondaria extends Vue{
@@ -15,4 +17,15 @@ export default class EstrazioneSecondaria extends Vue{
     @Prop()
     recipe:Recipe.IRecipe;
 
+    get bars() {
+        return [
+          { 
+            backgroundColor: "#b3dbff", 
+            borderColor: "#848484", 
+            height: this.recipe.extraction_aux_1_chart_setpointx.setpointHMI,
+            width: this.recipe.extraction_aux_1_chart_setpointy.setpointHMI
+          }
+        ] as svg.BarChartInfo[]
+      }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
index 36a6915c..def332d0 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/estrazione/components/base-components/estrazione-secondaria.vue
@@ -24,11 +24,14 @@
 		<hr />
 		<article class="ml-10">
 			<scheda
-				class="box-500"
+				class="box-500 color_3"
 				:portata="recipe.extraction_aux_1_chart_setpointx"
 				:durata="recipe.extraction_aux_1_chart_setpointy"
 			></scheda>
 		</article>
+		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
+		</article>
 	</section>
 </template>
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/controstampoSVG.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/controstampoSVG.vue
index 104ec5e7..eaa95011 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/controstampoSVG.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/controstampoSVG.vue
@@ -5,7 +5,7 @@
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_upperplate_max_height.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_upperplate_max_height.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/corniceSVG.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/corniceSVG.vue
index 0ac79a7f..6234e182 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/corniceSVG.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/corniceSVG.vue
@@ -5,14 +5,14 @@
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_frame_dim_y.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_frame_dim_y.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="general_sizes_frame_dim_x">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_frame_dim_x.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_frame_dim_x.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/lastraSVG.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/lastraSVG.vue
index 9df14117..6ed2f856 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/lastraSVG.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/lastraSVG.vue
@@ -5,21 +5,21 @@
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_sheet_dim_x.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_sheet_dim_x.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="general_sizes_sheet_dim_y">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_sheet_dim_y.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_sheet_dim_y.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3" v-focus-on="general_sizes_sheet_thickness">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_sheet_thickness.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_sheet_thickness.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/piastraSVG.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/piastraSVG.vue
index 6a4fe4f2..620881cd 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/piastraSVG.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/piastraSVG.vue
@@ -5,14 +5,14 @@
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_plate_dim_y.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_plate_dim_y.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="general_sizes_plate_dim_x">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_plate_dim_x.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_plate_dim_x.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.vue
index 4b7cdb87..09f303c9 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/formato/components/SVG_Components/stampoSVG.vue
@@ -5,35 +5,35 @@
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_mould_dim_x.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_mould_dim_x.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="general_sizes_mould_dim_y">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_mould_dim_y.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_mould_dim_y.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3" v-focus-on="general_sizes_mould_max_height">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_mould_max_height.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_mould_max_height.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota4" v-focus-on="general_sizes_mould_base_height">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_mould_base_height.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_mould_base_height.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota5" v-focus-on="general_sizes_mould_min_height">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.general_sizes_mould_min_height.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.general_sizes_mould_min_height.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.ts
index 3cc7f025..436b1086 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.ts
@@ -10,19 +10,32 @@ import { recipeActions } from "@/store/recipe.store";
 import { store } from "@/store";
 import { Deferred } from "@/services";
 import { recipeService } from "@/services/recipeService";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
 @Component({
   components: {
     modal: Modal,
     slider: Slider,
     stepfooter: StepFooter,
-    scheda: Scheda
+    scheda: Scheda,
+    svgChart
   }
 })
 export default class ShowImbutituraInfo extends Vue {
 
   recipe: Recipe.IRecipe = this.$store.getters.getCurrent();
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.drawing_1_chart_setpointx.setpointHMI,
+        width: this.recipe.drawing_1_chart_setpointy.setpointHMI
+      }
+    ] as svg.BarChartInfo[]
+  }
+
   @Prop()
   deferred: Deferred<boolean>;
 
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue
index 136e8d96..aaf23f99 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue
@@ -1,73 +1,76 @@
 <template>
-	<div class="setup">
-		<modal type="imbutitura-info" :title="'drawinginfo_lbl_title' | localize('Imbutitura')">
-			<div slot="header-buttons">
-				<button class="modal-close" @click="close()">
-					<i class="fa fa-remove"></i>
-				</button>
-			</div>
-			<section>
-				<aside class="scrollable auto">
-					<div class="box transparent">
-						<div class="body">
-							<div class="input-area">
-								<img src="assets/icons/png/clessidra.png" />
-								<label>{{'drawing_delay'|localize('Ritardo')}}</label>
-								<numeric v-model="recipe.drawing_delay" />
-							</div>
-							<slider v-model="recipe.drawing_delay"></slider>
-							<hr />
-							<div class="input-area">
-								<label>{{'drawing_type'|localize('Tipo')}}</label>
-								<select class="form-control" v-model="recipe.drawing_type"></select>
-							</div>
-							<div class="input-area">
-								<label>{{'drawing_photocell'|localize('Scelta fotocellula')}}</label>
-								<select class="form-control" v-model="recipe.drawing_photocell"></select>
-							</div>
-							<div class="input-area">
-								<label>{{'drawing_height'|localize('Altezza bolla')}}</label>
-								<numeric v-model="recipe.drawing_height" />
-							</div>
-							<slider v-model="recipe.drawing_height"></slider>
-							<div class="input-area">
-								<label>{{'drawing_mantaining_flow'|localize('Portata mantenimento')}}</label>
-								<numeric v-model="recipe.drawing_mantaining_flow" />
-							</div>
-							<slider v-model="recipe.drawing_mantaining_flow"></slider>
-							<div class="input-area">
-								<label>{{'drawing_manual'|localize('Portata manuale')}}</label>
-								<numeric v-model="recipe.drawing_manual" />
-							</div>
-							<slider v-model="recipe.drawing_manual"></slider>
-							<div class="input-area">
-								<label>{{'drawing_mould_up_delay'|localize('Ritardo salita stampo')}}</label>
-								<numeric v-model="recipe.drawing_mould_up_delay" />
-							</div>
-							<slider v-model="recipe.drawing_mould_up_delay"></slider>
-						</div>
-					</div>
-				</aside>
-				<hr />
-				<article class="ml-10">
-					<scheda
-						class="box-500"
-						:portata="recipe.drawing_1_chart_setpointx"
-						:durata="recipe.drawing_1_chart_setpointy"
-					></scheda>
-				</article>
-			</section>
-			<footer>
-				<button class="btn" @click="annulla()">
-					<label>Annulla</label>
-				</button>
-				<button class="btn btn-success" @click="conferma()">
-					<label>Conferma</label>
-				</button>
-			</footer>
-		</modal>
-		<stepfooter :current="5" @click="goTo"></stepfooter>
-	</div>
+  <div class="setup">
+    <modal type="imbutitura-info" :title="'drawinginfo_lbl_title' | localize('Imbutitura')">
+      <div slot="header-buttons">
+        <button class="modal-close" @click="close()">
+          <i class="fa fa-remove"></i>
+        </button>
+      </div>
+      <section>
+        <aside class="scrollable auto">
+          <div class="box transparent">
+            <div class="body">
+              <div class="input-area">
+                <img src="assets/icons/png/clessidra.png" />
+                <label>{{'drawing_delay'|localize('Ritardo')}}</label>
+                <numeric v-model="recipe.drawing_delay" />
+              </div>
+              <slider v-model="recipe.drawing_delay"></slider>
+              <hr />
+              <div class="input-area">
+                <label>{{'drawing_type'|localize('Tipo')}}</label>
+                <select class="form-control" v-model="recipe.drawing_type"></select>
+              </div>
+              <div class="input-area">
+                <label>{{'drawing_photocell'|localize('Scelta fotocellula')}}</label>
+                <select class="form-control" v-model="recipe.drawing_photocell"></select>
+              </div>
+              <div class="input-area">
+                <label>{{'drawing_height'|localize('Altezza bolla')}}</label>
+                <numeric v-model="recipe.drawing_height" />
+              </div>
+              <slider v-model="recipe.drawing_height"></slider>
+              <div class="input-area">
+                <label>{{'drawing_mantaining_flow'|localize('Portata mantenimento')}}</label>
+                <numeric v-model="recipe.drawing_mantaining_flow" />
+              </div>
+              <slider v-model="recipe.drawing_mantaining_flow"></slider>
+              <div class="input-area">
+                <label>{{'drawing_manual'|localize('Portata manuale')}}</label>
+                <numeric v-model="recipe.drawing_manual" />
+              </div>
+              <slider v-model="recipe.drawing_manual"></slider>
+              <div class="input-area">
+                <label>{{'drawing_mould_up_delay'|localize('Ritardo salita stampo')}}</label>
+                <numeric v-model="recipe.drawing_mould_up_delay" />
+              </div>
+              <slider v-model="recipe.drawing_mould_up_delay"></slider>
+            </div>
+          </div>
+        </aside>
+        <hr />
+        <article class="ml-10">
+          <scheda
+            class="box-500 color_3"
+            :portata="recipe.drawing_1_chart_setpointx"
+            :durata="recipe.drawing_1_chart_setpointy"
+          ></scheda>
+        </article>
+        <article>
+          <svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
+        </article>
+      </section>
+      <footer>
+        <button class="btn" @click="annulla()">
+          <label>Annulla</label>
+        </button>
+        <button class="btn btn-success" @click="conferma()">
+          <label>Conferma</label>
+        </button>
+      </footer>
+    </modal>
+    <stepfooter :current="5" @click="goTo"></stepfooter>
+  </div>
 </template>
 
 <script lang="ts" src="./show-imbutitura-info.ts"></script>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.vue
index fb8a2714..9a8e2ca3 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.vue
@@ -4,33 +4,33 @@
 		<div class="borded_label" id="quota1" v-focus-on="pyrometer_lowerthermoregulator_sleep_percentage">
 			<div>
 				<span>{{recipe.pyrometer_lowerthermoregulator_sleep_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_lowerthermoregulator_sleep_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="pyrometer_lowerthermoregulator_min_percentage">
 			<div>
 				<span>{{recipe.pyrometer_lowerthermoregulator_min_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_lowerthermoregulator_min_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3" v-focus-on="pyrometer_lowerthermoregulator_max_percentage">
 			<div>
 				<span>{{recipe.pyrometer_lowerthermoregulator_max_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_lowerthermoregulator_max_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota4" v-focus-on="pyrometer_lowerthermoregulator_start_adjustment">
 			<div>
 				<img src="assets/icons/png/temperatura.png" />
 				<span>{{recipe.pyrometer_lowerthermoregulator_start_adjustment.setpointHMI}}</span>
-				<small>°C</small>
+				<small>{{recipe.pyrometer_lowerthermoregulator_start_adjustment.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota5" v-focus-on="pyrometer_lowerthermoregulator_end_adjustment">
 			<div>
 				<img src="assets/icons/png/temperatura.png" />
 				<span>{{recipe.pyrometer_lowerthermoregulator_end_adjustment.setpointHMI}}</span>
-				<small>°C</small>
+				<small>{{recipe.pyrometer_lowerthermoregulator_end_adjustment.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.vue
index b2bd54ca..ea0384a5 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.vue
@@ -4,33 +4,33 @@
 		<div class="borded_label" id="quota1" v-focus-on="pyrometer_upperthermoregulator_sleep_percentage">
 			<div>
 				<span>{{recipe.pyrometer_upperthermoregulator_sleep_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_upperthermoregulator_sleep_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2" v-focus-on="pyrometer_upperthermoregulator_min_percentage">
 			<div>
 				<span>{{recipe.pyrometer_upperthermoregulator_min_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_upperthermoregulator_min_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3" v-focus-on="pyrometer_upperthermoregulator_max_percentage">
 			<div>
 				<span>{{recipe.pyrometer_upperthermoregulator_max_percentage.setpointHMI}}</span>
-				<small>%</small>
+				<small>{{recipe.pyrometer_upperthermoregulator_max_percentage.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota4" v-focus-on="pyrometer_upperthermoregulator_start_adjustment">
 			<div>
 				<img src="assets/icons/png/temperatura.png" />
 				<span>{{recipe.pyrometer_upperthermoregulator_start_adjustment.setpointHMI}}</span>
-				<small>°C</small>
+				<small>{{recipe.pyrometer_upperthermoregulator_start_adjustment.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota5" v-focus-on="pyrometer_upperthermoregulator_end_adjustment">
 			<div>
 				<img src="assets/icons/png/temperatura.png" />
 				<span>{{recipe.pyrometer_upperthermoregulator_end_adjustment.setpointHMI}}</span>
-				<small>°C</small>
+				<small>{{recipe.pyrometer_upperthermoregulator_end_adjustment.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
index 8767f677..5afda67a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/quote-velocita.vue
@@ -2,30 +2,30 @@
 	<div class="svg-area">
 		<img src="assets/svg/disegno-quote-velocita.svg" />
 		<div class="borded_label" id="quota1">
-			<div>
+			<div v-focus-on="positions_frame_intermediate_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_frame_intermediate_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_intermediate_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_intermediate_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_frame_intermediate_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_intermediate_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2">
-			<div>
+			<div v-focus-on="positions_frame_lower_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_frame_lower_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_lower_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_frame_lower_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_lower_speed.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota3">
+		<div class="borded_label" id="quota3" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/discesa.png" />
 				<span>00</span>
@@ -37,7 +37,7 @@
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota4">
+		<div class="borded_label" id="quota4" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/discesa.png" />
 				<span>00</span>
@@ -50,22 +50,22 @@
 			</div>
 		</div>
 		<div class="borded_label" id="quota5">
-			<div>
+			<div v-focus-on="positions_frame_upper_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_frame_upper_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_upper_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_frame_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_frame_upper_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_upper_speed.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota6">
+		<div class="borded_label" id="quota6" v-focus-on="positions_frame_unload_position">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.positions_frame_unload_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_frame_unload_position.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
index 89532952..58d90299 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/stampo.vue
@@ -1,35 +1,35 @@
 <template>
 	<div class="svg-area">
 		<img src="assets/svg/disegno-quote-velocita-stampo.svg" />
-		<div class="borded_label" id="quota1">
+		<div class="borded_label" id="quota1" v-focus-on="positions_mould_intermediate_position">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>{{recipe.positions_mould_intermediate_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_intermediate_position.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota2">
+		<div class="borded_label" id="quota2" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota3">
+		<div class="borded_label" id="quota3" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota4">
+		<div class="borded_label" id="quota4" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
 				<small>mm</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota5">
+		<div class="borded_label" id="quota5" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
@@ -38,51 +38,51 @@
 		</div>
 
 		<div class="borded_label" id="quota6">
-			<div>
+			<div v-focus-on="positions_mould_upperdeceleration_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_mould_upperdeceleration_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_upperdeceleration_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_upperdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_mould_upperdeceleration_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_upperdeceleration_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota7">
-			<div>
+			<div v-focus-on="positions_mould_upper_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_mould_upper_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_upper_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_mould_upper_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_upper_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota8">
-			<div>
+			<div v-focus-on="positions_mould_lowerdeceleration_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_mould_lowerdeceleration_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_lowerdeceleration_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_lowerdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_mould_lowerdeceleration_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_lowerdeceleration_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota9">
-			<div>
+			<div v-focus-on="positions_mould_lower_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_mould_lower_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_lower_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_mould_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_mould_lower_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_mould_lower_speed.unitMeasure}}</small>
 			</div>
 		</div>
 	</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
index 7b2a2668..2a6de904 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/SVG_Components/svgcontrostampo.vue
@@ -2,54 +2,54 @@ e<template>
 	<div class="svg-area">
 		<img src="assets/svg/disegno-controstampo-quote-velocita.svg" />
 		<div class="borded_label" id="quota1">
-			<div>
+			<div v-focus-on="positions_upperplate_lower_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_upperplate_lower_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_lower_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_lower_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_upperplate_lower_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_lower_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota2">
-			<div>
+			<div v-focus-on="positions_upperplate_lowerdeceleration_position">
 				<img src="assets/icons/png/salita.png" />
 				<span>{{recipe.positions_upperplate_lowerdeceleration_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_lowerdeceleration_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_lowerdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_upperplate_lowerdeceleration_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_lowerdeceleration_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota3">
-			<div>
+			<div v-focus-on="positions_upperplate_upper_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_upperplate_upper_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_upper_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_upper_speed">
 				<img src="assets/icons/png/alta.png" />
 				<span>{{recipe.positions_upperplate_upper_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_upper_speed.unitMeasure}}</small>
 			</div>
 		</div>
 		<div class="borded_label" id="quota4">
-			<div>
+			<div v-focus-on="positions_upperplate_upperdeceleration_position">
 				<img src="assets/icons/png/discesa.png" />
 				<span>{{recipe.positions_upperplate_upperdeceleration_position.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_upperdeceleration_position.unitMeasure}}</small>
 			</div>
-			<div>
+			<div v-focus-on="positions_upperplate_upperdeceleration_speed">
 				<img src="assets/icons/png/bassa.png" />
 				<span>{{recipe.positions_upperplate_upperdeceleration_speed.setpointHMI}}</span>
-				<small>mm</small>
+				<small>{{recipe.positions_upperplate_upperdeceleration_speed.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota5">
+		<div class="borded_label" id="quota5" v-focus-on="">
 			<div>
 				<img src="assets/icons/png/quota.png" />
 				<span>00</span>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
index 64f64378..66cc2d76 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/controstampo.vue
@@ -8,25 +8,25 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_upperplate_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lower_position" />
+						<numeric v-model="recipe.positions_upperplate_lower_position" id="positions_upperplate_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lower_speed" />
+						<numeric v-model="recipe.positions_upperplate_lower_speed" id="positions_upperplate_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lower_speed"></slider>
 
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_upperplate_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upper_position" />
+						<numeric v-model="recipe.positions_upperplate_upper_position" id="positions_upperplate_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upper_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upper_speed" />
+						<numeric v-model="recipe.positions_upperplate_upper_speed" id="positions_upperplate_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upper_speed"></slider>
 
@@ -34,12 +34,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_upperdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" />
+						<numeric v-model="recipe.positions_upperplate_upperdeceleration_position" id="positions_upperplate_upperdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upperdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
-						<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" />
+						<numeric v-model="recipe.positions_upperplate_upperdeceleration_speed" id="positions_upperplate_upperdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_upperdeceleration_speed"></slider>
 
@@ -47,12 +47,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_upperplate_lowerdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" />
+						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_position" id="positions_upperplate_lowerdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lowerdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_upperplate_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
-						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" />
+						<numeric v-model="recipe.positions_upperplate_lowerdeceleration_speed" id="positions_upperplate_lowerdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_upperplate_lowerdeceleration_speed"></slider>
 				</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
index c4c6965c..898fcb58 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/discesa-cornice.vue
@@ -8,13 +8,13 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_frame_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_frame_lower_position" />
+						<numeric v-model="recipe.positions_frame_lower_position" id="positions_frame_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_frame_lower_speed" />
+						<numeric v-model="recipe.positions_frame_lower_speed" id="positions_frame_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_lower_speed"></slider>
 
@@ -22,13 +22,13 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_intermediate_position' | localize('Quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_frame_intermediate_position" />
+						<numeric v-model="recipe.positions_frame_intermediate_position" id="positions_frame_intermediate_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_intermediate_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_intermediate_speed' | localize('Velocità a quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_frame_intermediate_speed" />
+						<numeric v-model="recipe.positions_frame_intermediate_speed" id="positions_frame_intermediate_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_intermediate_speed"></slider>
 
@@ -36,13 +36,13 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_frame_upper_position" />
+						<numeric v-model="recipe.positions_frame_upper_position" id="positions_frame_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_upper_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_frame_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_frame_upper_speed" />
+						<numeric v-model="recipe.positions_frame_upper_speed" id="positions_frame_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_frame_upper_speed"></slider>
 
@@ -50,7 +50,7 @@
 
 					<div class="input-area">
 						<label>{{'positions_frame_unload_position' | localize('Quota')}}</label>
-						<numeric v-model="recipe.positions_frame_unload_position" />
+						<numeric v-model="recipe.positions_frame_unload_position" id="positions_frame_unload_position"/>
 					</div>
 					<slider v-model="recipe.positions_frame_unload_position"></slider>
 				</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
index 2e87adbc..f8bb30d7 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/quote-velocita/components/salita-stampo.vue
@@ -8,30 +8,30 @@
 				<div class="body">
 					<div class="input-area">
 						<label>{{'positions_mould_lower_position' | localize('Quota inferiore')}}</label>
-						<numeric v-model="recipe.positions_mould_lower_position" />
+						<numeric v-model="recipe.positions_mould_lower_position" id="positions_mould_lower_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lower_position"></slider>
 
 					<div class="input-area">
 						<label>{{'positions_mould_lower_speed' | localize('Velocità discesa')}}</label>
-						<numeric v-model="recipe.positions_mould_lower_speed" />
+						<numeric v-model="recipe.positions_mould_lower_speed" id="positions_mould_lower_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lower_speed"></slider>
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_mould_intermediate_position' | localize('Quota intermedia')}}</label>
-						<numeric v-model="recipe.positions_mould_intermediate_position" />
+						<numeric v-model="recipe.positions_mould_intermediate_position" id="positions_mould_intermediate_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_intermediate_position"></slider>
 					<hr />
 					<div class="input-area">
 						<label>{{'positions_mould_upper_position' | localize('Quota superiore')}}</label>
-						<numeric v-model="recipe.positions_mould_upper_position" />
+						<numeric v-model="recipe.positions_mould_upper_position" id="positions_mould_upper_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upper_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_upper_speed' | localize('Velocità salita')}}</label>
-						<numeric v-model="recipe.positions_mould_upper_speed" />
+						<numeric v-model="recipe.positions_mould_upper_speed" id="positions_mould_upper_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upper_speed"></slider>
 
@@ -39,12 +39,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_mould_upperdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_mould_upperdeceleration_position" />
+						<numeric v-model="recipe.positions_mould_upperdeceleration_position" id="positions_mould_upperdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upperdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_upperdeceleration_speed' | localize('Velocità di rallentamento salita')}}</label>
-						<numeric v-model="recipe.positions_mould_upperdeceleration_speed" />
+						<numeric v-model="recipe.positions_mould_upperdeceleration_speed" id="positions_mould_upperdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_upperdeceleration_speed"></slider>
 
@@ -52,12 +52,12 @@
 
 					<div class="input-area">
 						<label>{{'positions_mould_lowerdeceleration_position' | localize('Corsa')}}</label>
-						<numeric v-model="recipe.positions_mould_lowerdeceleration_position" />
+						<numeric v-model="recipe.positions_mould_lowerdeceleration_position" id="positions_mould_lowerdeceleration_position"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lowerdeceleration_position"></slider>
 					<div class="input-area">
 						<label>{{'positions_mould_lowerdeceleration_speed' | localize('Velocità di rallentamento discesa')}}</label>
-						<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" />
+						<numeric v-model="recipe.positions_mould_lowerdeceleration_speed" id="positions_mould_lowerdeceleration_speed"/>
 					</div>
 					<slider v-model="recipe.positions_mould_lowerdeceleration_speed"></slider>
 				</div>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.ts
index 9a4b6641..34be9ad8 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.ts
@@ -3,11 +3,35 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
-@Component({ name: 'prevuoto', components: { slider: Slider } })
+@Component({ name: 'prevuoto', components: { slider: Slider,scheda:Scheda,svgChart } })
 export default class Prevuoto extends Vue {
 
   @Prop()
   recipe: Recipe.IRecipe;
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#fff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_pre_1_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_pre_1_chart_setpointy.setpointHMI 
+      },
+      { 
+        backgroundColor: "#e5f3ff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_pre_2_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_pre_2_chart_setpointy.setpointHMI 
+      },
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_pre_3_chart_setpointx.setpointHMI,
+        width: this.recipe.vacuum_pre_3_chart_setpointy.setpointHMI 
+      }
+    ] as svg.BarChartInfo[]
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
index 051e8690..be48fc5d 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/prevuoto.vue
@@ -27,17 +27,18 @@
 				:durata="recipe.vacuum_pre_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_2"
 				:portata="recipe.vacuum_pre_2_chart_setpointx"
 				:durata="recipe.vacuum_pre_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_3"
 				:portata="recipe.vacuum_pre_3_chart_setpointx"
 				:durata="recipe.vacuum_pre_3_chart_setpointy"
 			></scheda>
 		</article>
 		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
 			<div class="box transparent box-500 center">
 				<div class="body">
 					<div class="input-area">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.ts
index f43f143a..fc60d283 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.ts
@@ -3,11 +3,35 @@ import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
-@Component({ name: 'vuotoausiliario', components: { slider: Slider, scheda: Scheda } })
+@Component({ name: 'vuotoausiliario', components: { slider: Slider, scheda: Scheda, svgChart } })
 export default class VuotoAusiliario extends Vue {
 
   @Prop()
   recipe: Recipe.IRecipe;
 
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#fff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_aux_1_chart_setpointx.setpointHMI,
+        width: this.recipe.vacuum_aux_1_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#e5f3ff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_aux_2_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_aux_2_chart_setpointy.setpointHMI
+      },
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_aux_3_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_aux_3_chart_setpointy.setpointHMI 
+      }
+    ] as svg.BarChartInfo[]
+  }
+
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
index 7dbd32eb..98deaa0a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-ausiliario.vue
@@ -35,17 +35,18 @@
 				:durata="recipe.vacuum_aux_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_2"
 				:portata="recipe.vacuum_aux_2_chart_setpointx"
 				:durata="recipe.vacuum_aux_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_3"
 				:portata="recipe.vacuum_aux_3_chart_setpointx"
 				:durata="recipe.vacuum_aux_3_chart_setpointy"
 			></scheda>
 		</article>
 		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
 			<div class="box box-500 transparent center">
 				<div class="body">
 					<div class="input-area">
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.ts
index 9bd28bb1..299f50a4 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.ts
@@ -1,13 +1,38 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import {Prop} from 'vue-property-decorator';
+import { Prop } from 'vue-property-decorator';
 import Slider from "@/app_modules_thermo/components/slider.vue";
 import Scheda from "@/app_modules_thermo/components/scheda.vue";
+import svgChart from "@/app_modules_thermo/components/svgChart.vue";
 
-@Component({name:'vuotoprincipale', components: { slider:Slider, scheda:Scheda}})
-export default class VuotoPrincipale extends Vue{
+@Component({ name: 'vuotoprincipale', components: { slider: Slider, scheda: Scheda, svgChart } })
+export default class VuotoPrincipale extends Vue {
 
-    @Prop()
-    recipe:Recipe.IRecipe;
+  @Prop()
+  recipe: Recipe.IRecipe;
+
+
+  get bars() {
+    return [
+      { 
+        backgroundColor: "#fff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_main_1_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_main_1_chart_setpointy.setpointHMI 
+      },
+      { 
+        backgroundColor: "#e5f3ff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_main_2_chart_setpointx.setpointHMI,
+        width: this.recipe.vacuum_main_2_chart_setpointy.setpointHMI 
+      },
+      { 
+        backgroundColor: "#b3dbff", 
+        borderColor: "#848484", 
+        height: this.recipe.vacuum_main_3_chart_setpointx.setpointHMI, 
+        width: this.recipe.vacuum_main_3_chart_setpointy.setpointHMI 
+      }
+    ] as svg.BarChartInfo[]
+  }
 
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.vue
index 9f5fabfa..f4da0835 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/vuoto/base-components/vuoto-principale.vue
@@ -35,17 +35,18 @@
 				:durata="recipe.vacuum_main_1_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_2"
 				:portata="recipe.vacuum_main_2_chart_setpointx"
 				:durata="recipe.vacuum_main_2_chart_setpointy"
 			></scheda>
 			<scheda
-				class="box-500 mb-10"
+				class="box-500 mb-10 color_3"
 				:portata="recipe.vacuum_main_3_chart_setpointx"
 				:durata="recipe.vacuum_main_3_chart_setpointy"
 			></scheda>
 		</article>
 		<article>
+			<svg-chart line-bar-color="#848484" :bars="bars"></svg-chart>
 			<div class="box transparent box-500 center">
 				<div class="body">
 					<div class="input-area">