From 0ca4810f7a8d779f321cc6672e66fb69741d75f8 Mon Sep 17 00:00:00 2001
From: Ivan Proskuryakov <axzhbi5wcm9za3vyewfrb3y@gmail.com>
Date: Wed, 11 Jan 2023 14:59:30 +0300
Subject: [PATCH 1/5] feature: rending of multiple charts with gridview

---
 .../charts/CandleChartContainerSimple.vue     | 137 ++++
 src/components/charts/CandleChartSimple.vue   | 738 ++++++++++++++++++
 src/components/layout/NavBar.vue              |   1 +
 src/router/index.ts                           |   5 +
 src/views/GraphsGrid.vue                      |  62 ++
 5 files changed, 943 insertions(+)
 create mode 100644 src/components/charts/CandleChartContainerSimple.vue
 create mode 100644 src/components/charts/CandleChartSimple.vue
 create mode 100644 src/views/GraphsGrid.vue

diff --git a/src/components/charts/CandleChartContainerSimple.vue b/src/components/charts/CandleChartContainerSimple.vue
new file mode 100644
index 0000000000..886a36bd1a
--- /dev/null
+++ b/src/components/charts/CandleChartContainerSimple.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex h-100">
+    <div class="flex-fill w-100 flex-column align-items-stretch d-flex h-100">
+      {{ pair }}
+      <div class="me-1 ms-1 h-100">
+        <CandleChartSimple
+          v-if="hasDataset"
+          :dataset="dataset"
+          :trades="trades"
+          :plot-config="plotStore.plotConfig"
+          :heikin-ashi="settingsStore.useHeikinAshiCandles"
+          :use-u-t-c="settingsStore.timezone === 'UTC'"
+          :theme="settingsStore.chartTheme"
+          :slider-position="sliderPosition"
+        >
+        </CandleChartSimple>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Trade, PairHistory, LoadingStatus, ChartSliderPosition } from '@/types';
+import CandleChartSimple from '@/components/charts/CandleChartSimple.vue';
+import { useSettingsStore } from '@/stores/settings';
+import { usePlotConfigStore } from '@/stores/plotConfig';
+import { defineComponent, ref, computed, onMounted } from 'vue';
+import { useBotStore } from '@/stores/ftbotwrapper';
+
+export default defineComponent({
+  name: 'CandleChartContainerSimple',
+  components: { CandleChartSimple },
+  props: {
+    trades: { required: false, default: () => [], type: Array as () => Trade[] },
+    pair: { required: true, type: String },
+    timeframe: { required: true, type: String },
+    historicView: { required: false, default: false, type: Boolean },
+    plotConfigModal: { required: false, default: true, type: Boolean },
+    timerange: { required: false, default: '', type: String },
+    strategy: { required: false, default: '', type: String },
+    sliderPosition: {
+      required: false,
+      type: Object as () => ChartSliderPosition,
+      default: () => undefined,
+    },
+  },
+  setup(props) {
+    const settingsStore = useSettingsStore();
+    const botStore = useBotStore();
+    const plotStore = usePlotConfigStore();
+    const pair = ref('');
+
+    const dataset = computed((): PairHistory => {
+      if (props.historicView) {
+        return botStore.activeBot.history[`${pair.value}__${props.timeframe}`]?.data;
+      }
+      return botStore.activeBot.candleData[`${pair.value}__${props.timeframe}`]?.data;
+    });
+
+    const datasetColumns = computed(() => (dataset.value ? dataset.value.columns : []));
+    const hasDataset = computed(() => !!dataset.value);
+    const noDatasetText = computed((): string => {
+      const status = props.historicView
+        ? botStore.activeBot.historyStatus
+        : botStore.activeBot.candleDataStatus;
+
+      switch (status) {
+        case LoadingStatus.loading:
+          return 'Loading...';
+
+        case LoadingStatus.success:
+          return 'No data available';
+
+        case LoadingStatus.error:
+          return 'Failed to load data';
+
+        default:
+          return 'Unknown';
+      }
+    });
+
+    const refresh = () => {
+      console.log('refresh', pair.value, props.timeframe);
+      if (pair.value && props.timeframe) {
+        if (props.historicView) {
+          botStore.activeBot.getPairHistory({
+            pair: pair.value,
+            timeframe: props.timeframe,
+            timerange: props.timerange,
+            strategy: props.strategy,
+          });
+        } else {
+          botStore.activeBot.getPairCandles({
+            pair: pair.value,
+            timeframe: props.timeframe,
+            limit: 500,
+          });
+        }
+      }
+    };
+
+    onMounted(() => {
+      pair.value = props.pair;
+      plotStore.plotConfigChanged();
+
+      refresh();
+    });
+
+    return {
+      botStore,
+      settingsStore,
+      plotStore,
+      history,
+      dataset,
+      datasetColumns,
+      noDatasetText,
+      hasDataset,
+
+      refresh,
+      pair,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>
diff --git a/src/components/charts/CandleChartSimple.vue b/src/components/charts/CandleChartSimple.vue
new file mode 100644
index 0000000000..48b236fd93
--- /dev/null
+++ b/src/components/charts/CandleChartSimple.vue
@@ -0,0 +1,738 @@
+<template>
+  <div class="d-flex flex-grow-1 chart-wrapper">
+    <v-chart v-if="hasData" ref="candleChart" :theme="theme" autoresize manual-update />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
+import randomColor from '@/shared/randomColor';
+import heikinashi from '@/shared/heikinashi';
+import { getTradeEntries } from '@/shared/charts/tradeChartData';
+import ECharts from 'vue-echarts';
+import { format } from 'date-fns-tz';
+
+import { use } from 'echarts/core';
+import { EChartsOption, SeriesOption, ScatterSeriesOption } from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { CandlestickChart, LineChart, BarChart, ScatterChart } from 'echarts/charts';
+import {
+  AxisPointerComponent,
+  CalendarComponent,
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TimelineComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from 'echarts/components';
+
+use([
+  AxisPointerComponent,
+  CalendarComponent,
+  DatasetComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TimelineComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+
+  CandlestickChart,
+  BarChart,
+  LineChart,
+  ScatterChart,
+  CanvasRenderer,
+]);
+
+// Chart default options
+const MARGINLEFT = '5.5%';
+const MARGINRIGHT = '1%';
+const NAMEGAP = 55;
+const SUBPLOTHEIGHT = 8; // Value in %
+
+// Binance colors
+const upColor = '#26A69A';
+const upBorderColor = '#26A69A';
+const downColor = '#EF5350';
+const downBorderColor = '#EF5350';
+
+const buySignalColor = '#00ff26';
+const shortEntrySignalColor = '#00ff26';
+const sellSignalColor = '#faba25';
+const shortexitSignalColor = '#faba25';
+
+export default defineComponent({
+  name: 'CandleChartSimple',
+  components: { 'v-chart': ECharts },
+  props: {
+    trades: { required: false, default: () => [], type: Array as () => Trade[] },
+    dataset: { required: true, type: Object as () => PairHistory },
+    heikinAshi: { required: false, default: false, type: Boolean },
+    useUTC: { required: false, default: true, type: Boolean },
+    plotConfig: { required: true, type: Object as () => PlotConfig },
+    theme: { default: 'dark', type: String },
+    sliderPosition: {
+      required: false,
+      type: Object as () => ChartSliderPosition,
+      default: () => undefined,
+    },
+  },
+  setup(props) {
+    const candleChart = ref<typeof ECharts>();
+    const buyData = ref<number[][]>([]);
+    const sellData = ref<number[][]>([]);
+    const chartOptions = ref<EChartsOption>({});
+
+    const strategy = computed(() => {
+      return props.dataset ? props.dataset.strategy : '';
+    });
+
+    const pair = computed(() => {
+      return props.dataset ? props.dataset.pair : '';
+    });
+
+    const timeframe = computed(() => {
+      return props.dataset ? props.dataset.timeframe : '';
+    });
+
+    const datasetColumns = computed(() => {
+      return props.dataset ? props.dataset.columns : [];
+    });
+
+    const hasData = computed(() => {
+      return props.dataset !== null && typeof props.dataset === 'object';
+    });
+
+    const filteredTrades = computed(() => {
+      return props.trades.filter((item: Trade) => item.pair === pair.value);
+    });
+
+    const chartTitle = computed(() => {
+      return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
+    });
+
+    const updateChart = (initial = false) => {
+      if (!hasData.value) {
+        return;
+      }
+      if (chartOptions.value?.title) {
+        chartOptions.value.title[0].text = chartTitle.value;
+      }
+      const colDate = props.dataset.columns.findIndex((el) => el === '__date_ts');
+      const colOpen = props.dataset.columns.findIndex((el) => el === 'open');
+      const colHigh = props.dataset.columns.findIndex((el) => el === 'high');
+      const colLow = props.dataset.columns.findIndex((el) => el === 'low');
+      const colClose = props.dataset.columns.findIndex((el) => el === 'close');
+      const colVolume = props.dataset.columns.findIndex((el) => el === 'volume');
+      const colEntryData = props.dataset.columns.findIndex(
+        (el) => el === '_buy_signal_close' || el === '_enter_long_signal_close',
+      );
+      const colExitData = props.dataset.columns.findIndex(
+        (el) => el === '_sell_signal_close' || el === '_exit_long_signal_close',
+      );
+
+      const colShortEntryData = props.dataset.columns.findIndex(
+        (el) => el === '_enter_short_signal_close',
+      );
+      const colShortExitData = props.dataset.columns.findIndex(
+        (el) => el === '_exit_short_signal_close',
+      );
+
+      const subplotCount =
+        'subplots' in props.plotConfig ? Object.keys(props.plotConfig.subplots).length + 1 : 1;
+
+      if (Array.isArray(chartOptions.value?.dataZoom)) {
+        // Only set zoom once ...
+        if (initial) {
+          const startingZoom = (1 - 250 / props.dataset.length) * 100;
+          chartOptions.value.dataZoom.forEach((el, i) => {
+            if (chartOptions.value && chartOptions.value.dataZoom) {
+              chartOptions.value.dataZoom[i].start = startingZoom;
+            }
+          });
+        } else {
+          // Remove start/end settings after chart initialization to avoid chart resetting
+          chartOptions.value.dataZoom.forEach((el, i) => {
+            if (chartOptions.value && chartOptions.value.dataZoom) {
+              delete chartOptions.value.dataZoom[i].start;
+              delete chartOptions.value.dataZoom[i].end;
+            }
+          });
+        }
+      }
+      const dataset = props.heikinAshi
+        ? heikinashi(datasetColumns.value, props.dataset.data)
+        : props.dataset.data.slice();
+      // Add new rows to end to allow slight "scroll past"
+      const newArray = Array(dataset[dataset.length - 2].length);
+      newArray[colDate] = dataset[dataset.length - 1][colDate] + props.dataset.timeframe_ms * 3;
+      dataset.push(newArray);
+      const options: EChartsOption = {
+        dataset: {
+          source: dataset,
+        },
+        grid: [
+          {
+            left: MARGINLEFT,
+            right: MARGINRIGHT,
+            // Grid Layout from bottom to top
+            bottom: `${subplotCount * SUBPLOTHEIGHT + 2}%`,
+          },
+          {
+            // Volume
+            left: MARGINLEFT,
+            right: MARGINRIGHT,
+            // Grid Layout from bottom to top
+            bottom: `${subplotCount * SUBPLOTHEIGHT}%`,
+            height: `${SUBPLOTHEIGHT}%`,
+          },
+        ],
+
+        series: [
+          {
+            name: 'Candles',
+            type: 'candlestick',
+            barWidth: '80%',
+            itemStyle: {
+              color: upColor,
+              color0: downColor,
+              borderColor: upBorderColor,
+              borderColor0: downBorderColor,
+            },
+            encode: {
+              x: colDate,
+              // open, close, low, high
+              y: [colOpen, colClose, colLow, colHigh],
+            },
+          },
+          {
+            name: 'Volume',
+            type: 'bar',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            itemStyle: {
+              color: '#777777',
+            },
+            large: true,
+            encode: {
+              x: colDate,
+              y: colVolume,
+            },
+          },
+          {
+            name: 'Entry',
+            type: 'scatter',
+            symbol: 'triangle',
+            symbolSize: 10,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            itemStyle: {
+              color: buySignalColor,
+            },
+            encode: {
+              x: colDate,
+              y: colEntryData,
+            },
+          },
+        ],
+      };
+
+      if (colExitData >= 0) {
+        // if (!Array.isArray(chartOptions.value?.legend) && chartOptions.value?.legend?.data) {
+        //   chartOptions.value.legend.data.push('Long exit');
+        // }
+        if (Array.isArray(options.series)) {
+          options.series.push({
+            name: 'Exit',
+            type: 'scatter',
+            symbol: 'diamond',
+            symbolSize: 8,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            itemStyle: {
+              color: sellSignalColor,
+            },
+            encode: {
+              x: colDate,
+              y: colExitData,
+            },
+          });
+        }
+      }
+
+      if (Array.isArray(options.series)) {
+        if (colShortEntryData >= 0) {
+          options.series.push({
+            // Short entry
+            name: 'Entry',
+            type: 'scatter',
+            symbol: 'triangle',
+            symbolRotate: 180,
+            symbolSize: 10,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            itemStyle: {
+              color: shortEntrySignalColor,
+            },
+            tooltip: {
+              // Hide tooltip - it's already there for longs.
+              // show: false,
+            },
+            encode: {
+              x: colDate,
+              y: colShortEntryData,
+            },
+          });
+        }
+        if (colShortExitData >= 0) {
+          options.series.push({
+            // Short exit
+            name: 'Exit',
+            type: 'scatter',
+            symbol: 'pin',
+            symbolSize: 8,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            itemStyle: {
+              color: shortexitSignalColor,
+            },
+            tooltip: {
+              // Hide tooltip - it's already there for longs.
+              // show: false,
+            },
+            encode: {
+              x: colDate,
+              y: colShortExitData,
+            },
+          });
+        }
+      }
+
+      // Merge this into original data
+      Object.assign(chartOptions.value, options);
+
+      if ('main_plot' in props.plotConfig) {
+        Object.entries(props.plotConfig.main_plot).forEach(([key, value]) => {
+          const col = props.dataset.columns.findIndex((el) => el === key);
+          if (col > 1) {
+            if (!Array.isArray(chartOptions.value?.legend) && chartOptions.value?.legend?.data) {
+              chartOptions.value.legend.data.push(key);
+            }
+            const sp: SeriesOption = {
+              name: key,
+              type: value.type || 'line',
+              xAxisIndex: 0,
+              yAxisIndex: 0,
+              itemStyle: {
+                color: value.color,
+              },
+              encode: {
+                x: colDate,
+                y: col,
+              },
+              showSymbol: false,
+            };
+            if (Array.isArray(chartOptions.value?.series)) {
+              chartOptions.value?.series.push(sp);
+            }
+          } else {
+            console.log(`element ${key} for main plot not found in columns.`);
+          }
+        });
+      }
+
+      // START Subplots
+      if ('subplots' in props.plotConfig) {
+        let plotIndex = 2;
+        Object.entries(props.plotConfig.subplots).forEach(([key, value]) => {
+          // define yaxis
+
+          // Subplots are added from bottom to top - only the "bottom-most" plot stays at the bottom.
+          // const currGridIdx = totalSubplots - plotIndex > 1 ? totalSubplots - plotIndex : plotIndex;
+          const currGridIdx = plotIndex;
+          if (
+            Array.isArray(chartOptions.value.yAxis) &&
+            chartOptions.value.yAxis.length <= plotIndex
+          ) {
+            chartOptions.value.yAxis.push({
+              scale: true,
+              gridIndex: currGridIdx,
+              name: key,
+              nameLocation: 'middle',
+              nameGap: NAMEGAP,
+              axisLabel: { show: true },
+              axisLine: { show: false },
+              axisTick: { show: false },
+              splitLine: { show: false },
+            });
+          }
+          if (
+            Array.isArray(chartOptions.value.xAxis) &&
+            chartOptions.value.xAxis.length <= plotIndex
+          ) {
+            chartOptions.value.xAxis.push({
+              type: 'time',
+              scale: true,
+              gridIndex: currGridIdx,
+              boundaryGap: false,
+              axisLine: { onZero: false },
+              axisTick: { show: false },
+              axisLabel: { show: false },
+              axisPointer: {
+                label: { show: false },
+              },
+              splitLine: { show: false },
+              splitNumber: 20,
+            });
+          }
+          if (Array.isArray(chartOptions.value.dataZoom)) {
+            chartOptions.value.dataZoom.forEach((el) =>
+              el.xAxisIndex && Array.isArray(el.xAxisIndex) ? el.xAxisIndex.push(plotIndex) : null,
+            );
+          }
+          if (chartOptions.value.grid && Array.isArray(chartOptions.value.grid)) {
+            chartOptions.value.grid.push({
+              left: MARGINLEFT,
+              right: MARGINRIGHT,
+              bottom: `${(subplotCount - plotIndex + 1) * SUBPLOTHEIGHT}%`,
+              height: `${SUBPLOTHEIGHT}%`,
+            });
+          }
+          Object.entries(value).forEach(([sk, sv]) => {
+            // entries per subplot
+            const col = props.dataset.columns.findIndex((el) => el === sk);
+            if (col > 0) {
+              if (!Array.isArray(chartOptions.value.legend) && chartOptions.value.legend?.data) {
+                chartOptions.value.legend.data.push(sk);
+              }
+              const sp: SeriesOption = {
+                name: sk,
+                type: sv.type || 'line',
+                xAxisIndex: plotIndex,
+                yAxisIndex: plotIndex,
+                itemStyle: {
+                  color: sv.color || randomColor(),
+                },
+                encode: {
+                  x: colDate,
+                  y: col,
+                },
+                showSymbol: false,
+              };
+              if (chartOptions.value.series && Array.isArray(chartOptions.value.series)) {
+                chartOptions.value.series.push(sp);
+              }
+            } else {
+              console.log(`element ${sk} was not found in the columns.`);
+            }
+          });
+
+          plotIndex += 1;
+        });
+      }
+      // END Subplots
+      // Last subplot should show xAxis labels
+      // if (options.xAxis && Array.isArray(options.xAxis)) {
+      //   options.xAxis[options.xAxis.length - 1].axisLabel.show = true;
+      //   options.xAxis[options.xAxis.length - 1].axisTick.show = true;
+      // }
+      if (Array.isArray(chartOptions.value.grid)) {
+        // Last subplot is bottom
+        chartOptions.value.grid[chartOptions.value.grid.length - 1].bottom = '50px';
+        delete chartOptions.value.grid[chartOptions.value.grid.length - 1].top;
+      }
+      const { tradeData } = getTradeEntries(props.dataset, filteredTrades.value);
+
+      const nameTrades = 'Trades';
+      if (!Array.isArray(chartOptions.value.legend) && chartOptions.value.legend?.data) {
+        chartOptions.value.legend.data.push(nameTrades);
+      }
+      const tradesSeries: ScatterSeriesOption = {
+        name: nameTrades,
+        type: 'scatter',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        encode: {
+          x: 0,
+          y: 1,
+          label: 5,
+          tooltip: 6,
+        },
+        label: {
+          show: true,
+          fontSize: 12,
+          backgroundColor: props.theme !== 'dark' ? '#fff' : '#000',
+          padding: 2,
+          color: props.theme === 'dark' ? '#fff' : '#000',
+        },
+        labelLayout: { rotate: 75, align: 'left', dx: 10 },
+        itemStyle: {
+          // color: tradeSellColor,
+          color: (v) => v.data[4],
+          opacity: 0.9,
+        },
+        symbol: (v) => v[2],
+        symbolRotate: (v) => v[3],
+        symbolSize: 13,
+        data: tradeData,
+      };
+      if (Array.isArray(chartOptions.value.series)) {
+        chartOptions.value.series.push(tradesSeries);
+      }
+
+      // console.log('chartOptions', chartOptions.value);
+      candleChart.value?.setOption(chartOptions.value, {
+        replaceMerge: ['series', 'grid', 'yAxis', 'xAxis', 'legend'],
+        noMerge: !initial,
+      });
+    };
+
+    const initializeChartOptions = () => {
+      // Ensure we start empty.
+      candleChart.value?.setOption({}, { noMerge: true });
+
+      chartOptions.value = {
+        title: [
+          {
+            // text: this.chartTitle,
+            show: false,
+          },
+        ],
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        useUTC: props.useUTC,
+        animation: false,
+        legend: {
+          // Initial legend, further entries are pushed to the below list
+          data: ['Candles', 'Volume', 'Entry', 'Exit'],
+          right: '1%',
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          renderMode: 'richText',
+          backgroundColor: 'rgba(80,80,80,0.7)',
+          borderWidth: 0,
+          textStyle: {
+            color: '#fff',
+          },
+          axisPointer: {
+            type: 'cross',
+            lineStyle: {
+              color: '#cccccc',
+              width: 1,
+              opacity: 1,
+            },
+          },
+          // positioning copied from https://echarts.apache.org/en/option.html#tooltip.position
+          position(pos, params, dom, rect, size) {
+            // tooltip will be fixed on the right if mouse hovering on the left,
+            // and on the left if hovering on the right.
+            const obj = { top: 60 };
+            const mouseIsLeft = pos[0] < size.viewSize[0] / 2;
+            obj[['left', 'right'][+mouseIsLeft]] = mouseIsLeft ? 5 : 60;
+            return obj;
+          },
+        },
+        axisPointer: {
+          link: [{ xAxisIndex: 'all' }],
+          label: {
+            backgroundColor: '#777',
+          },
+        },
+        xAxis: [
+          {
+            type: 'time',
+            scale: true,
+            boundaryGap: false,
+            axisLine: { onZero: false },
+            axisTick: { show: true },
+            axisLabel: { show: true },
+            axisPointer: {
+              label: { show: false },
+            },
+            position: 'top',
+            splitLine: { show: false },
+            splitNumber: 20,
+            min: 'dataMin',
+            max: 'dataMax',
+          },
+          {
+            type: 'time',
+            gridIndex: 1,
+            scale: true,
+            boundaryGap: false,
+            axisLine: { onZero: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            axisPointer: {
+              label: { show: false },
+            },
+            splitLine: { show: false },
+            splitNumber: 20,
+            min: 'dataMin',
+            max: 'dataMax',
+          },
+        ],
+        yAxis: [
+          {
+            scale: true,
+          },
+          {
+            scale: true,
+            gridIndex: 1,
+            splitNumber: 2,
+            name: 'volume',
+            nameLocation: 'middle',
+            // position: 'right',
+            nameGap: NAMEGAP,
+            axisLabel: { show: false },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false },
+          },
+        ],
+        dataZoom: [
+          // Start values are recalculated once the data is known
+          {
+            type: 'inside',
+            xAxisIndex: [0, 1],
+            start: 80,
+            end: 100,
+          },
+          {
+            show: true,
+            xAxisIndex: [0, 1],
+            type: 'slider',
+            bottom: 10,
+            start: 80,
+            end: 100,
+          },
+        ],
+        // visualMap: {
+        //   //  TODO: this would allow to colorize volume bars (if we'd want this)
+        //   //  Needs green / red indicator column in data.
+        //   show: true,
+        //   seriesIndex: 1,
+        //   dimension: 5,
+        //   pieces: [
+        //     {
+        //       max: 500000.0,
+        //       color: downColor,
+        //     },
+        //     {
+        //       min: 500000.0,
+        //       color: upColor,
+        //     },
+        //   ],
+        // },
+      };
+
+      console.log('Initialized');
+      updateChart(true);
+    };
+
+    const updateSliderPosition = () => {
+      if (!props.sliderPosition) return;
+
+      const start = format(
+        props.sliderPosition.startValue - props.dataset.timeframe_ms * 40,
+        'yyyy-MM-dd HH:mm:ss',
+      );
+      const end = format(
+        props.sliderPosition.endValue
+          ? props.sliderPosition.endValue + props.dataset.timeframe_ms * 40
+          : props.sliderPosition.startValue + props.dataset.timeframe_ms * 80,
+        'yyyy-MM-dd HH:mm:ss',
+      );
+      if (candleChart.value) {
+        candleChart.value.dispatchAction({
+          type: 'dataZoom',
+          dataZoomIndex: 0,
+          startValue: start,
+          endValue: end,
+        });
+      }
+    };
+
+    // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
+    // Calculate Buy and sell Series
+    // if (!this.signalsCalculated) {
+    //   // Generate Buy and sell array (using open rate to display marker)
+    //   for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
+    //     if (this.dataset.data[i][colBuy] === 1) {
+    //       this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+    //     }
+    //     if (this.dataset.data[i][colSell] === 1) {
+    //       this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+    //     }
+    //   }
+    //   this.signalsCalculated = true;
+    // }
+    // }
+    onMounted(() => {
+      initializeChartOptions();
+    });
+
+    watch(
+      () => props.useUTC,
+      () => initializeChartOptions(),
+    );
+
+    watch(
+      () => props.dataset,
+      () => updateChart(),
+    );
+
+    watch(
+      () => props.plotConfig,
+      () => initializeChartOptions(),
+    );
+
+    watch(
+      () => props.heikinAshi,
+      () => updateChart(),
+    );
+
+    watch(
+      () => props.sliderPosition,
+      () => updateSliderPosition(),
+    );
+
+    return {
+      candleChart,
+      buyData,
+      sellData,
+      strategy,
+      pair,
+      timeframe,
+      datasetColumns,
+      hasData,
+      filteredTrades,
+      chartTitle,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.chart-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.echarts {
+  width: 100%;
+  min-height: 200px;
+  /* TODO: height calculation is not working correctly - uses min-height for now */
+  /* height: 600px; */
+  height: 100%;
+}
+</style>
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index c29d4872bd..b96d0f6334 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -19,6 +19,7 @@
             >Dashboard</router-link
           >
           <router-link class="nav-link navbar-nav" to="/graph">Chart</router-link>
+          <router-link class="nav-link navbar-nav" to="/graph_grid">Grid</router-link>
           <router-link class="nav-link navbar-nav" to="/logs">Logs</router-link>
           <router-link v-if="botStore.canRunBacktest" class="nav-link navbar-nav" to="/backtest"
             >Backtest</router-link
diff --git a/src/router/index.ts b/src/router/index.ts
index a6dd9b8a52..cdb912c01f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,6 +20,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Freqtrade Graph',
     component: () => import('@/views/Graphs.vue'),
   },
+  {
+    path: '/graph_grid',
+    name: 'Freqtrade Graph Grid',
+    component: () => import('@/views/GraphsGrid.vue'),
+  },
   {
     path: '/logs',
     name: 'Freqtrade Logs',
diff --git a/src/views/GraphsGrid.vue b/src/views/GraphsGrid.vue
new file mode 100644
index 0000000000..58b9a9a201
--- /dev/null
+++ b/src/views/GraphsGrid.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <div class="mx-2 mt-2 pb-1 h-100">
+      <div class="graphs-grid">
+        <div v-for="pair in botStore.activeBot.whitelist" class="grid">
+          <CandleChartContainerSimple
+            :pair="pair"
+            :historic-view="botStore.activeBot.isWebserverMode"
+            :timeframe="botStore.activeBot.timeframe"
+            :trades="botStore.activeBot.trades"
+            :timerange="botStore.activeBot.isWebserverMode ? timerange : ''"
+            :strategy="botStore.activeBot.isWebserverMode ? strategy : ''"
+            :plot-config-modal="false"
+          >
+          </CandleChartContainerSimple>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import CandleChartContainerSimple from '@/components/charts/CandleChartContainerSimple.vue';
+import { defineComponent, onMounted, ref } from 'vue';
+import { useBotStore } from '@/stores/ftbotwrapper';
+
+export default defineComponent({
+  name: 'GraphsGrid',
+  components: {
+    CandleChartContainerSimple,
+  },
+  setup() {
+    const botStore = useBotStore();
+    const strategy = ref('');
+    const timerange = ref('');
+    const selectedTimeframe = ref('');
+
+    onMounted(() => {
+      botStore.activeBot.getWhitelist();
+    });
+
+    return {
+      botStore,
+      strategy,
+      timerange,
+      selectedTimeframe,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+  .graphs-grid {
+    display: flex;
+    flex-wrap: wrap;
+
+    .grid {
+      width: 33%;
+      box-sizing: border-box;
+    }
+  }
+</style>

From 189f1cc7bdb4c6b9652312be4bcde55f9ccdc13c Mon Sep 17 00:00:00 2001
From: Ivan Proskuryakov <axzhbi5wcm9za3vyewfrb3y@gmail.com>
Date: Wed, 11 Jan 2023 15:11:35 +0300
Subject: [PATCH 2/5] feature: alternative chart version - v1

---
 src/components/charts/CandleChartSimple.vue | 34 +--------------------
 1 file changed, 1 insertion(+), 33 deletions(-)

diff --git a/src/components/charts/CandleChartSimple.vue b/src/components/charts/CandleChartSimple.vue
index 48b236fd93..9000e3fa85 100644
--- a/src/components/charts/CandleChartSimple.vue
+++ b/src/components/charts/CandleChartSimple.vue
@@ -27,7 +27,6 @@ import {
   TimelineComponent,
   TitleComponent,
   ToolboxComponent,
-  TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
 } from 'echarts/components';
@@ -42,7 +41,6 @@ use([
   TimelineComponent,
   TitleComponent,
   ToolboxComponent,
-  TooltipComponent,
   VisualMapComponent,
   VisualMapPiecewiseComponent,
 
@@ -283,10 +281,6 @@ export default defineComponent({
             itemStyle: {
               color: shortEntrySignalColor,
             },
-            tooltip: {
-              // Hide tooltip - it's already there for longs.
-              // show: false,
-            },
             encode: {
               x: colDate,
               y: colShortEntryData,
@@ -515,33 +509,7 @@ export default defineComponent({
           data: ['Candles', 'Volume', 'Entry', 'Exit'],
           right: '1%',
         },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          renderMode: 'richText',
-          backgroundColor: 'rgba(80,80,80,0.7)',
-          borderWidth: 0,
-          textStyle: {
-            color: '#fff',
-          },
-          axisPointer: {
-            type: 'cross',
-            lineStyle: {
-              color: '#cccccc',
-              width: 1,
-              opacity: 1,
-            },
-          },
-          // positioning copied from https://echarts.apache.org/en/option.html#tooltip.position
-          position(pos, params, dom, rect, size) {
-            // tooltip will be fixed on the right if mouse hovering on the left,
-            // and on the left if hovering on the right.
-            const obj = { top: 60 };
-            const mouseIsLeft = pos[0] < size.viewSize[0] / 2;
-            obj[['left', 'right'][+mouseIsLeft]] = mouseIsLeft ? 5 : 60;
-            return obj;
-          },
-        },
+
         axisPointer: {
           link: [{ xAxisIndex: 'all' }],
           label: {

From e91319c8fa6f9d87aff148c1509df57596f3d3eb Mon Sep 17 00:00:00 2001
From: Ivan Proskuryakov <axzhbi5wcm9za3vyewfrb3y@gmail.com>
Date: Wed, 11 Jan 2023 15:53:21 +0300
Subject: [PATCH 3/5] feature: alternative chart version - legends removed

---
 .../charts/CandleChartContainerSimple.vue     |  9 ++-
 src/components/charts/CandleChartSimple.vue   | 76 ++++++-------------
 src/views/GraphsGrid.vue                      | 29 ++++---
 3 files changed, 44 insertions(+), 70 deletions(-)

diff --git a/src/components/charts/CandleChartContainerSimple.vue b/src/components/charts/CandleChartContainerSimple.vue
index 886a36bd1a..a082f1e7f8 100644
--- a/src/components/charts/CandleChartContainerSimple.vue
+++ b/src/components/charts/CandleChartContainerSimple.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="d-flex h-100">
     <div class="flex-fill w-100 flex-column align-items-stretch d-flex h-100">
-      {{ pair }}
+      <div class="pair-name">
+        {{ pair }}
+      </div>
       <div class="me-1 ms-1 h-100">
         <CandleChartSimple
           v-if="hasDataset"
@@ -134,4 +136,9 @@ export default defineComponent({
   opacity: 0;
   transform: translateX(30px);
 }
+.pair-name {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+}
 </style>
diff --git a/src/components/charts/CandleChartSimple.vue b/src/components/charts/CandleChartSimple.vue
index 9000e3fa85..3588209595 100644
--- a/src/components/charts/CandleChartSimple.vue
+++ b/src/components/charts/CandleChartSimple.vue
@@ -52,6 +52,7 @@ use([
 ]);
 
 // Chart default options
+const MARGINTOP = '1.5%';
 const MARGINLEFT = '5.5%';
 const MARGINRIGHT = '1%';
 const NAMEGAP = 55;
@@ -180,6 +181,7 @@ export default defineComponent({
         },
         grid: [
           {
+            top: MARGINTOP,
             left: MARGINLEFT,
             right: MARGINRIGHT,
             // Grid Layout from bottom to top
@@ -187,6 +189,7 @@ export default defineComponent({
           },
           {
             // Volume
+            top: MARGINTOP,
             left: MARGINLEFT,
             right: MARGINRIGHT,
             // Grid Layout from bottom to top
@@ -220,7 +223,7 @@ export default defineComponent({
             itemStyle: {
               color: '#777777',
             },
-            large: true,
+            large: false,
             encode: {
               x: colDate,
               y: colVolume,
@@ -281,6 +284,10 @@ export default defineComponent({
             itemStyle: {
               color: shortEntrySignalColor,
             },
+            tooltip: {
+              // Hide tooltip - it's already there for longs.
+              // show: false,
+            },
             encode: {
               x: colDate,
               y: colShortEntryData,
@@ -363,7 +370,7 @@ export default defineComponent({
               name: key,
               nameLocation: 'middle',
               nameGap: NAMEGAP,
-              axisLabel: { show: true },
+              axisLabel: { show: false },
               axisLine: { show: false },
               axisTick: { show: false },
               splitLine: { show: false },
@@ -433,12 +440,6 @@ export default defineComponent({
           plotIndex += 1;
         });
       }
-      // END Subplots
-      // Last subplot should show xAxis labels
-      // if (options.xAxis && Array.isArray(options.xAxis)) {
-      //   options.xAxis[options.xAxis.length - 1].axisLabel.show = true;
-      //   options.xAxis[options.xAxis.length - 1].axisTick.show = true;
-      // }
       if (Array.isArray(chartOptions.value.grid)) {
         // Last subplot is bottom
         chartOptions.value.grid[chartOptions.value.grid.length - 1].bottom = '50px';
@@ -462,7 +463,7 @@ export default defineComponent({
           tooltip: 6,
         },
         label: {
-          show: true,
+          show: false,
           fontSize: 12,
           backgroundColor: props.theme !== 'dark' ? '#fff' : '#000',
           padding: 2,
@@ -504,11 +505,11 @@ export default defineComponent({
         backgroundColor: 'rgba(0, 0, 0, 0)',
         useUTC: props.useUTC,
         animation: false,
-        legend: {
-          // Initial legend, further entries are pushed to the below list
-          data: ['Candles', 'Volume', 'Entry', 'Exit'],
-          right: '1%',
-        },
+        // legend: {
+        //   // Initial legend, further entries are pushed to the below list
+        //   data: ['Candles', 'Volume', 'Entry', 'Exit'],
+        //   right: '1%',
+        // },
 
         axisPointer: {
           link: [{ xAxisIndex: 'all' }],
@@ -522,8 +523,8 @@ export default defineComponent({
             scale: true,
             boundaryGap: false,
             axisLine: { onZero: false },
-            axisTick: { show: true },
-            axisLabel: { show: true },
+            axisTick: { show: false },
+            axisLabel: { show: false },
             axisPointer: {
               label: { show: false },
             },
@@ -566,18 +567,22 @@ export default defineComponent({
             axisLine: { show: false },
             axisTick: { show: false },
             splitLine: { show: false },
+            axisPointer: {
+              label: { show: false },
+            },
           },
         ],
         dataZoom: [
           // Start values are recalculated once the data is known
           {
+
             type: 'inside',
             xAxisIndex: [0, 1],
             start: 80,
             end: 100,
           },
           {
-            show: true,
+            show: false,
             xAxisIndex: [0, 1],
             type: 'slider',
             bottom: 10,
@@ -585,23 +590,6 @@ export default defineComponent({
             end: 100,
           },
         ],
-        // visualMap: {
-        //   //  TODO: this would allow to colorize volume bars (if we'd want this)
-        //   //  Needs green / red indicator column in data.
-        //   show: true,
-        //   seriesIndex: 1,
-        //   dimension: 5,
-        //   pieces: [
-        //     {
-        //       max: 500000.0,
-        //       color: downColor,
-        //     },
-        //     {
-        //       min: 500000.0,
-        //       color: upColor,
-        //     },
-        //   ],
-        // },
       };
 
       console.log('Initialized');
@@ -631,45 +619,25 @@ export default defineComponent({
       }
     };
 
-    // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
-    // Calculate Buy and sell Series
-    // if (!this.signalsCalculated) {
-    //   // Generate Buy and sell array (using open rate to display marker)
-    //   for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
-    //     if (this.dataset.data[i][colBuy] === 1) {
-    //       this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-    //     }
-    //     if (this.dataset.data[i][colSell] === 1) {
-    //       this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-    //     }
-    //   }
-    //   this.signalsCalculated = true;
-    // }
-    // }
     onMounted(() => {
       initializeChartOptions();
     });
-
     watch(
       () => props.useUTC,
       () => initializeChartOptions(),
     );
-
     watch(
       () => props.dataset,
       () => updateChart(),
     );
-
     watch(
       () => props.plotConfig,
       () => initializeChartOptions(),
     );
-
     watch(
       () => props.heikinAshi,
       () => updateChart(),
     );
-
     watch(
       () => props.sliderPosition,
       () => updateSliderPosition(),
diff --git a/src/views/GraphsGrid.vue b/src/views/GraphsGrid.vue
index 58b9a9a201..acb0e01b0d 100644
--- a/src/views/GraphsGrid.vue
+++ b/src/views/GraphsGrid.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="d-flex flex-column h-100">
-    <div class="mx-2 mt-2 pb-1 h-100">
-      <div class="graphs-grid">
-        <div v-for="pair in botStore.activeBot.whitelist" class="grid">
-          <CandleChartContainerSimple
-            :pair="pair"
-            :historic-view="botStore.activeBot.isWebserverMode"
-            :timeframe="botStore.activeBot.timeframe"
-            :trades="botStore.activeBot.trades"
-            :timerange="botStore.activeBot.isWebserverMode ? timerange : ''"
-            :strategy="botStore.activeBot.isWebserverMode ? strategy : ''"
-            :plot-config-modal="false"
-          >
-          </CandleChartContainerSimple>
-        </div>
+    <div class="graphs-grid">
+      <div v-for="pair in botStore.activeBot.whitelist" class="grid">
+        <CandleChartContainerSimple
+          :pair="pair"
+          :historic-view="botStore.activeBot.isWebserverMode"
+          :timeframe="botStore.activeBot.timeframe"
+          :trades="botStore.activeBot.trades"
+          :timerange="botStore.activeBot.isWebserverMode ? timerange : ''"
+          :strategy="botStore.activeBot.isWebserverMode ? strategy : ''"
+          :plot-config-modal="false"
+        >
+        </CandleChartContainerSimple>
       </div>
     </div>
   </div>
@@ -55,7 +53,8 @@ export default defineComponent({
     flex-wrap: wrap;
 
     .grid {
-      width: 33%;
+      width: 50%;
+      height: 50vh;
       box-sizing: border-box;
     }
   }

From e591af3f7cd79f8e6771fe9de537ea4e52bf44a0 Mon Sep 17 00:00:00 2001
From: Ivan Proskuryakov <axzhbi5wcm9za3vyewfrb3y@gmail.com>
Date: Wed, 11 Jan 2023 15:58:03 +0300
Subject: [PATCH 4/5] feature: alternative chart version - zooming removed

---
 src/components/charts/CandleChartSimple.vue | 52 ---------------------
 1 file changed, 52 deletions(-)

diff --git a/src/components/charts/CandleChartSimple.vue b/src/components/charts/CandleChartSimple.vue
index 3588209595..0ecc0af60b 100644
--- a/src/components/charts/CandleChartSimple.vue
+++ b/src/components/charts/CandleChartSimple.vue
@@ -21,7 +21,6 @@ import {
   AxisPointerComponent,
   CalendarComponent,
   DatasetComponent,
-  DataZoomComponent,
   GridComponent,
   LegendComponent,
   TimelineComponent,
@@ -35,7 +34,6 @@ use([
   AxisPointerComponent,
   CalendarComponent,
   DatasetComponent,
-  DataZoomComponent,
   GridComponent,
   LegendComponent,
   TimelineComponent,
@@ -149,25 +147,6 @@ export default defineComponent({
       const subplotCount =
         'subplots' in props.plotConfig ? Object.keys(props.plotConfig.subplots).length + 1 : 1;
 
-      if (Array.isArray(chartOptions.value?.dataZoom)) {
-        // Only set zoom once ...
-        if (initial) {
-          const startingZoom = (1 - 250 / props.dataset.length) * 100;
-          chartOptions.value.dataZoom.forEach((el, i) => {
-            if (chartOptions.value && chartOptions.value.dataZoom) {
-              chartOptions.value.dataZoom[i].start = startingZoom;
-            }
-          });
-        } else {
-          // Remove start/end settings after chart initialization to avoid chart resetting
-          chartOptions.value.dataZoom.forEach((el, i) => {
-            if (chartOptions.value && chartOptions.value.dataZoom) {
-              delete chartOptions.value.dataZoom[i].start;
-              delete chartOptions.value.dataZoom[i].end;
-            }
-          });
-        }
-      }
       const dataset = props.heikinAshi
         ? heikinashi(datasetColumns.value, props.dataset.data)
         : props.dataset.data.slice();
@@ -395,11 +374,6 @@ export default defineComponent({
               splitNumber: 20,
             });
           }
-          if (Array.isArray(chartOptions.value.dataZoom)) {
-            chartOptions.value.dataZoom.forEach((el) =>
-              el.xAxisIndex && Array.isArray(el.xAxisIndex) ? el.xAxisIndex.push(plotIndex) : null,
-            );
-          }
           if (chartOptions.value.grid && Array.isArray(chartOptions.value.grid)) {
             chartOptions.value.grid.push({
               left: MARGINLEFT,
@@ -572,24 +546,6 @@ export default defineComponent({
             },
           },
         ],
-        dataZoom: [
-          // Start values are recalculated once the data is known
-          {
-
-            type: 'inside',
-            xAxisIndex: [0, 1],
-            start: 80,
-            end: 100,
-          },
-          {
-            show: false,
-            xAxisIndex: [0, 1],
-            type: 'slider',
-            bottom: 10,
-            start: 80,
-            end: 100,
-          },
-        ],
       };
 
       console.log('Initialized');
@@ -609,14 +565,6 @@ export default defineComponent({
           : props.sliderPosition.startValue + props.dataset.timeframe_ms * 80,
         'yyyy-MM-dd HH:mm:ss',
       );
-      if (candleChart.value) {
-        candleChart.value.dispatchAction({
-          type: 'dataZoom',
-          dataZoomIndex: 0,
-          startValue: start,
-          endValue: end,
-        });
-      }
     };
 
     onMounted(() => {

From 04383127a8b02ded4d0b44be3dde2fee2ec267a5 Mon Sep 17 00:00:00 2001
From: Ivan Proskuryakov <axzhbi5wcm9za3vyewfrb3y@gmail.com>
Date: Wed, 11 Jan 2023 16:38:29 +0300
Subject: [PATCH 5/5] feature: alternative chart version - volume label removed

---
 src/components/charts/CandleChartSimple.vue | 54 +++------------------
 src/views/GraphsGrid.vue                    |  1 +
 2 files changed, 8 insertions(+), 47 deletions(-)

diff --git a/src/components/charts/CandleChartSimple.vue b/src/components/charts/CandleChartSimple.vue
index 0ecc0af60b..2082986983 100644
--- a/src/components/charts/CandleChartSimple.vue
+++ b/src/components/charts/CandleChartSimple.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted, watch } from 'vue';
-import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
+import { Trade, PairHistory, PlotConfig } from '@/types';
 import randomColor from '@/shared/randomColor';
 import heikinashi from '@/shared/heikinashi';
 import { getTradeEntries } from '@/shared/charts/tradeChartData';
@@ -50,8 +50,8 @@ use([
 ]);
 
 // Chart default options
-const MARGINTOP = '1.5%';
-const MARGINLEFT = '5.5%';
+const MARGINTOP = '0%';
+const MARGINLEFT = '7.5%';
 const MARGINRIGHT = '1%';
 const NAMEGAP = 55;
 const SUBPLOTHEIGHT = 8; // Value in %
@@ -76,12 +76,7 @@ export default defineComponent({
     heikinAshi: { required: false, default: false, type: Boolean },
     useUTC: { required: false, default: true, type: Boolean },
     plotConfig: { required: true, type: Object as () => PlotConfig },
-    theme: { default: 'dark', type: String },
-    sliderPosition: {
-      required: false,
-      type: Object as () => ChartSliderPosition,
-      default: () => undefined,
-    },
+    theme: { default: 'dark', type: String }
   },
   setup(props) {
     const candleChart = ref<typeof ECharts>();
@@ -176,7 +171,6 @@ export default defineComponent({
             height: `${SUBPLOTHEIGHT}%`,
           },
         ],
-
         series: [
           {
             name: 'Candles',
@@ -227,9 +221,7 @@ export default defineComponent({
       };
 
       if (colExitData >= 0) {
-        // if (!Array.isArray(chartOptions.value?.legend) && chartOptions.value?.legend?.data) {
-        //   chartOptions.value.legend.data.push('Long exit');
-        // }
+
         if (Array.isArray(options.series)) {
           options.series.push({
             name: 'Exit',
@@ -470,21 +462,9 @@ export default defineComponent({
       candleChart.value?.setOption({}, { noMerge: true });
 
       chartOptions.value = {
-        title: [
-          {
-            // text: this.chartTitle,
-            show: false,
-          },
-        ],
         backgroundColor: 'rgba(0, 0, 0, 0)',
         useUTC: props.useUTC,
         animation: false,
-        // legend: {
-        //   // Initial legend, further entries are pushed to the below list
-        //   data: ['Candles', 'Volume', 'Entry', 'Exit'],
-        //   right: '1%',
-        // },
-
         axisPointer: {
           link: [{ xAxisIndex: 'all' }],
           label: {
@@ -533,8 +513,8 @@ export default defineComponent({
             scale: true,
             gridIndex: 1,
             splitNumber: 2,
-            name: 'volume',
-            nameLocation: 'middle',
+            // name: 'volume',
+            // nameLocation: 'middle',
             // position: 'right',
             nameGap: NAMEGAP,
             axisLabel: { show: false },
@@ -552,21 +532,6 @@ export default defineComponent({
       updateChart(true);
     };
 
-    const updateSliderPosition = () => {
-      if (!props.sliderPosition) return;
-
-      const start = format(
-        props.sliderPosition.startValue - props.dataset.timeframe_ms * 40,
-        'yyyy-MM-dd HH:mm:ss',
-      );
-      const end = format(
-        props.sliderPosition.endValue
-          ? props.sliderPosition.endValue + props.dataset.timeframe_ms * 40
-          : props.sliderPosition.startValue + props.dataset.timeframe_ms * 80,
-        'yyyy-MM-dd HH:mm:ss',
-      );
-    };
-
     onMounted(() => {
       initializeChartOptions();
     });
@@ -586,11 +551,6 @@ export default defineComponent({
       () => props.heikinAshi,
       () => updateChart(),
     );
-    watch(
-      () => props.sliderPosition,
-      () => updateSliderPosition(),
-    );
-
     return {
       candleChart,
       buyData,
diff --git a/src/views/GraphsGrid.vue b/src/views/GraphsGrid.vue
index acb0e01b0d..775052e472 100644
--- a/src/views/GraphsGrid.vue
+++ b/src/views/GraphsGrid.vue
@@ -51,6 +51,7 @@ export default defineComponent({
   .graphs-grid {
     display: flex;
     flex-wrap: wrap;
+    margin-top: 20px;
 
     .grid {
       width: 50%;