Stop distance

src/components/charts/CandleChart.vue

@@ -37,6 +37,9 @@ import {
   TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
+  // MarkAreaComponent,
+  MarkLineComponent,
+  // MarkPointComponent,
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -54,6 +57,9 @@ use([
   TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
+  // MarkAreaComponent,
+  MarkLineComponent,
+  // MarkPointComponent,
 
   CandlestickChart,
   BarChart,

src/shared/charts/tradeChartData.ts

@@ -127,6 +127,8 @@ export function generateTradeSeries(
 ): ScatterSeriesOption {
   const { tradeData } = getTradeEntries(dataset, trades);
 
+  const openTrades = trades.filter((t) => t.is_open);
+
   const tradesSeries: ScatterSeriesOption = {
     name: nameTrades,
     type: 'scatter',
@@ -158,6 +160,41 @@ export function generateTradeSeries(
     symbolSize: 13,
     data: tradeData,
   };
+  // Show distance to stoploss
+  if (openTrades.length > 0) {
+    // Ensure to import and "use" whatever feature in candleChart! (MarkLine, MarkArea, ...)
+    // Offset to avoid having the line at the very end of the chart
+    const offset = dataset.timeframe_ms * 10;
 
+    tradesSeries.markLine = {
+      symbol: 'none',
+      itemStyle: {
+        color: '#ff0000AA',
+      },
+      label: {
+        show: true,
+        position: 'middle',
+      },
+      lineStyle: {
+        type: 'solid',
+      },
+      data: openTrades.map((t) => {
+        return [
+          {
+            name: 'Stoploss',
+            yAxis: t.stop_loss_abs,
+            xAxis:
+              dataset.data_stop_ts - offset > t.open_timestamp
+                ? t.open_timestamp
+                : dataset.data_stop_ts - offset,
+          },
+          {
+            yAxis: t.stop_loss_abs,
+            xAxis: t.close_timestamp ?? dataset.data_stop_ts,
+          },
+        ];
+      }),
+    };
+  }
   return tradesSeries;
 }