Forecast UI: negative prices (#20977)

assets/js/components/Forecast/Chart.vue

@@ -326,7 +326,7 @@ export default defineComponent({
 						type: "timeseries",
 						display: true,
 						time: { unit: "day" },
-						border: { display: true },
+						border: { display: false },
 						grid: {
 							display: true,
 							color: colors.border,
@@ -368,13 +368,21 @@ export default defineComponent({
 						},
 					},
 					yForecast: {
-						display: false,
+						...this.yScaleOptions(ForecastType.Solar),
 						min: 0,
 						max: this.yMaxEntry(this.solarEntries, this.solar?.scale),
 						beginAtZero: true,
 					},
-					yCo2: { display: false, min: 0, max: this.yMax(this.co2Slots) },
-					yPrice: { display: false, min: 0, max: this.yMax(this.gridSlots) },
+					yCo2: {
+						...this.yScaleOptions(ForecastType.Co2),
+						min: 0,
+						max: this.yMax(this.co2Slots),
+					},
+					yPrice: {
+						...this.yScaleOptions(ForecastType.Price),
+						suggestedMin: 0,
+						max: this.yMax(this.gridSlots),
+					},
 				},
 			};
 		},
@@ -488,6 +496,23 @@ export default defineComponent({
 				return entry.val > entries[max].val ? index : max;
 			}, 0);
 		},
+		yScaleOptions(type: ForecastType) {
+			return type === this.selected
+				? {
+						display: true,
+						ticks: { display: false },
+						border: { display: false },
+						grid: {
+							display: true,
+							color: colors.border,
+							// @ts-expect-error no-explicit-any
+							lineWidth: (context) => {
+								return context.tick?.value === 0 ? 1 : 0;
+							},
+						},
+					}
+				: { display: false };
+		},
 	},
 });
 </script>